Question

我有一个jQuery数据表，其中每一行都有一个添加到购物车按钮。如果我执行搜索或单击表格中的另一个页面条目，该表格将动态加载新行和纽扣。因此，我有两种类型的添加到购物车按钮 - 一个用于动态创建的按钮，另一个用于原始按钮：

动态创建按钮的点击事件：

$(document).on('click', 'button.btn.btn-primary.addtocart', function() {
    //add to cart
});

单击原始按钮的事件：

$(".addtocart").click(function() {
    //add to cart
});

我遇到的问题是，如果我点击原始按钮，则点击事件会触发两次。有没有人知道策略或解决这个问题？

Answer 1

使用按钮单击处理程序中的event.stopImmediatePropagation()来阻止事件冒泡。

$(".addtocart").click(function (event) {
    //                          ^^^^^    Pass event object to the callback
    //add to cart

    event.stopImmediatePropagation();
});

修改

如果两个处理程序都相同，我建议只为动态和静态元素使用委托处理程序。

$(document).on('click', 'button.btn.btn-primary.addtocart', function () { // add to cart });

Answer 2

这是一个简单的解决方案。

只需在jQuery中使用on方法。

$(document).ready(function(){
    $("dynamically_created_element_selector").on("click", function()
    {
        //do whatever u want
    });
});

演示在这里 -

＆＃13;

$(function(){
    $('button').on('click',function(){
        var r= $('<br/><button class="dynamic_button" type="button">Dynamic Button</button>');
        $("body").append(r);
    });
    
    $(document).on('click', 'button.dynamic_button', function ()
    {
        alert("Dynamic Element Clicked !!");
    });
    
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<body>
    <button>Insert after</button> 
</body>

＆＃13;

单击动态创建的按钮jQuery

2 个答案:

演示在这里 -