单击动态创建的按钮 jQuery答案

【问题标题】：Clicking dynamically created buttons jQuery单击动态创建的按钮 jQuery
【发布时间】：2016-06-30 08:41:42
【问题描述】：

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

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

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

原始按钮的点击事件：

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

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

【问题讨论】：

你能展示一下 HTML 的样子吗？
为什么你需要 2 个处理程序来处理现有的和动态的，它们在逻辑上是否不同
因为动态按钮不适用于原始处理程序

标签： javascript jquery button

【解决方案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
});

【讨论】：

知道了——我现在正在使用 chrome。这适用于 IE、Firefox 和 Safari 吗？
@user1547174 是的，它应该可以工作。这也取决于您使用的浏览器版本和 jQuery 版本。

【解决方案2】：

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

只需在 jQuery 中使用 on 方法。

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

演示在这里-

$(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 !!");
    });
    
});

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

<body>
    <button>Insert after</button> 
</body>

【讨论】：

是的 - 我现在就有。问题是动态处理程序和原始处理程序都会触发，而我只希望其中一个触发。 Tushar 下面的回答解决了我的问题。