Ajax вызов от кнопки во всплывающей подсказке

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

Привязки селектора jQuery в вашем скрипте связываются при загрузке вашего javascript. В вашем коде при загрузке javascript он ищет элемент с идентификатором '#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 2

Просто используйте $(document).on('click', '#imgDel', function(){}) вместо $('#imgDel').click(function(){}), потому что при запуске функции щелчка элемент с #imgDel не существует.

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

Answer 3

попробуйте это:

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

Вы не можете использовать $('#imgDel').click(function(){});, потому что элемент '#imgDel' не находится в DOM, когда страница загружена;)