弹出框单击事件不起作用

Popover click event does not work

本文关键字：事件 不起作用 单击      更新时间：2023-09-26
$('.pop').each(function () {
    var $elem = $(this);
    $elem.popover({
        placement: 'auto',
        trigger: 'hover',
        html: true,
        container: $elem,
        animation: true,
        content: function () {
            var pop_dest = $(this).attr("data-pop");
            //console.log(plant);
            return $("#"+pop_dest).html();
        }
    });
});
$('#english').click(function() { // ---> THIS PART DOES NOT WORK
    alert("english");
});
$('#turkce').click(function() { // ---> THIS PART DOES NOT WORK
    console.log("turkce");
});

我在弹出窗口中有 2 个按钮。但是他们的点击事件不起作用。如何从按钮点击触发点击事件？我的 html 代码如下。 

<li>
    <a href="javascript: void(0);" id="languages" class="pop" data-html="true" data-toggle="popover" data-pop="popper-content" class="popper">
        <?=$language["languages"]?>
    </a>
    <div class="hide" id="popper-content">
        <ul class="lang-list">
            <li class="en">
                <button id="english">English</button>
            </li>
            <li class="tr">
                <button id="turkce">Türkçe</button>
            </li>
        </ul>
    </div>
</li>

当您调用 click 函数时，按钮尚未添加到页面(因为它们位于动态添加的弹出框中(，因此您必须使用一些来处理未来添加的内容： 

$('body').on('click', '#english', function () {
    alert("english");
});

您应该委托事件以确保事件到达所需的 DOM 元素，如果在执行 js 时它不存在：

$("body").on('click', '#english', function() {
    alert("english");
});
$("body").on('click', '#turkce', function() {
    alert("turkce");
});

您可以使用 on 方法使用 jquery 委派事件，其中选择器是将事件委托给子节点的父节点，firs 参数是事件名称click，第二个是您希望将事件委托给#english的子节点，第三个参数是处理程序。

popover的内容动态追加到页面。这意味着，当您尝试在页面加载时附加事件处理程序时，DOM 中不存在任何按钮。若要解决此问题，请使用委托的事件处理程序：

$(document).on('click', '#english', function() {
    alert("english");
}).on('click', '#turkce', function() { 
    console.log("turkce");
});

问题是<button>的默认类型为 submit 。 您不希望使用这种默认行为，因为您提供了自己的单击处理程序。 你需要type="button"按钮.

<button id="english" type="button">English</button>
相关文章：