javascript - 从工具提示中的按钮进行 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!');
});