Question

我一直在尝试通过工具提示中插入的按钮进行Ajax调用。我尝试使用引导工具提示和工具提示，但似乎没有任何效果，并且找不到有效的示例。请帮助

这是我一直在尝试使用Bootstrap工具提示编写的代码的简单版本。一旦工具提示出现在屏幕上，我就无法让JQuery识别按钮的点击

//=====================HTML and PHP===========================
//previously made a query to get the image source

<label class="label" data-toggle="tooltip">
<?php
if($row['prof_image'] != null && $row['prof_image'] != ''){
echo'<img class="rounded-circle img-thumbnail" id="avatar" src="'.htmlentities($row['prof_image']).'" alt="profile"/>';
}else{
echo'<img class="rounded-circle img-thumbnail" id="avatar" src="../uploads/profile/profile.png" alt="profile" style="max-width:70%;"/>';
}
</label>

//=================Javascript===========================

$('#avatar').tooltip({title: "<p>Update image or <button class='btn btn-sm btn-outline-secondary' id='imgDel'>Delete</button></p>", html: true, placement: "bottom", delay: {show: 0, hide: 2000}}); //the tooltip has a button. When tootlip on screen I want to be able to press the button and make ajax call to delete image


$('#imgDel').click(function(){
alert('delete option!');  //I put an alert instead of ajax call to see if it works. It doesn’t
});

在这个阶段，我试图按嵌套在工具提示中的按钮后得到警报，但是我什至无法使它起作用。请帮助

Answer 1

只需使用$(document).on('click', '#imgDel', function(){})而不是$('#imgDel').click(function(){})，因为在您启动点击功能时，带有#imgDel的元素不存在。

$(document).on('click', '#imgDel', function(){
   alert('delete option!');
});

Answer 2

JavaScript加载时，脚本中的jQuery选择器绑定即被绑定。在您的代码中，当javascript加载时，它正在寻找ID为'#imgDel'的元素，该元素在DOM中尚不存在。（它仅在工具提示出现后才出现在DOM中）因此，永远不会为您的点击处理程序进行绑定，因为找不到与它绑定的元素。

做类似的事情：

$(document).on("click", "#imgDel", function(e){
    alert("clicked !")
});

是一个可行的解决方案。您也可以尝试使用引导工具提示文档中记录的工具提示触发事件。

$('#avatar').tooltip({title: "<p>Update image or <button class='btn btn-sm btn-outline-secondary' id='imgDel'>Delete</button></p>", html: true, placement: "bottom", delay: {show: 0, hide: 2000}});

$('#avatar').on('shown.bs.tooltip', function(){
    $('#imgDel').click(function(){
        alert('delete option!');
    });

    // You can now insert any selectors or bindings related to your tooltip and its elements since
    // at this point your tooltip and its elements have been rendered into your DOM
});

基本上，一旦在元素上触发了“ show.bs.tooltip”事件，该函数便会运行一个函数，该事件在显示工具提示后运行（在隐藏工具提示后也有一个用于）。由工具提示触发的事件（在您将工具提示附加到的元素上）可以在引导工具提示文档中找到：https://getbootstrap.com/docs/4.1/components/tooltips/

Answer 3

尝试：

$(document).on("click", "#imgDel", function(e){
    alter("clicked !")
});

您不能使用$('#imgDel').click(function(){});，因为加载页面时元素'#imgDel'不在DOM中；）

通过工具提示中的按钮进行Ajax调用

3 个答案: