單擊動態創建的按鈕jQuery

Question

我有一個jQuery數據表，其中每一行都有一個添加到購物車按鈕。 如果執行搜索或單擊表中的其他頁面條目，該表將動態加載新的行和按鈕。 因此，我有兩種添加到購物車按鈕的類型-一種是動態創建的按鈕，另一種是原始按鈕：

動態創建的按鈕的Click事件：

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

原始按鈕的Click事件：

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

我遇到的問題是，如果單擊原始按鈕，則click事件將觸發兩次。 有誰知道策略或為此解決？

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
    });
});

演示在這里-

 $(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>

單擊動態創建的按鈕jQuery

問題描述

2 個解決方案

解決方案1
4 已采納 2016-03-15 03:43:12

解決方案2
0 2016-03-15 03:56:04

演示在這里-

單擊動態創建的按鈕jQuery

問題描述

2 個解決方案

解決方案1 4 已采納 2016-03-15 03:43:12

解決方案2 0 2016-03-15 03:56:04

演示在這里-

解決方案1
4 已采納 2016-03-15 03:43:12

解決方案2
0 2016-03-15 03:56:04