Ajax 从工具提示中的按钮调用

Question

我一直在尝试从工具提示中插入的按钮进行 ajax 调用。我尝试使用 bootstrap tooltip 和 tooltipster，但似乎没有任何效果，而且我找不到有效的示例。请帮助

这是我一直在尝试使用 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

试试这个：

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

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

Answer 3

脚本中的 jQuery 选择器绑定在 javascript 加载时绑定。在您的代码中，当 javascript 加载时，它正在查找 ID 为“#imgDel”的元素，该元素在 DOM 中尚不存在。（它只会在您的工具提示出现后出现在您的 DOM 中）因此，您的点击处理程序的绑定永远不会进行，因为无法找到它试图绑定到的元素。

做类似的事情：

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

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

$('#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' 事件后运行一个函数，该函数在您的工具提示显示后运行（还有一个在您的工具提示隐藏后运行）。工具提示触发的事件（在您附加工具提示的元素上）可以在 bootstrap 工具提示文档中找到：https://getbootstrap.com/docs/4.1/components/tooltips/

Ajax 从工具提示中的按钮调用

Ajax call from button in tooltip

javascript

ajax

jquery

tooltip