單擊一次即可執行JQuery三個按鈕單擊事件

代碼爲每個選項卡生成HTML + JS。現在在每個選項卡上，我有2個使用PHP在HTML中生成的按鈕。它還爲使用JQuery的每個按鈕生成Javascript onclick事件。單擊一次即可執行JQuery三個按鈕單擊事件

這是生成每個按鈕jQuery的單擊事件：

<script type="text/javascript"> 
    $(function() { 
     $(document).on("click", ".mybutton", function(e) { 
      e.preventDefault(); 
      alert($(this).attr('whoami')); 
      return false; 
     }); 
    }); 
    </script>'

現在得到由HTML生成的兩個按鈕具有以下結構：

<button type="button" class="mybutton" whoami="button_1">First Button</button> 
<button type="button" class="mybutton" whoami="button_2">Second Button</button>

現在HTML和JS都生成罰款我看到這兩個按鈕罰款，沒有JS錯誤沒有。我可以點擊這兩個按鈕，但這裏是發生了什麼：

當我在第一個按鈕，點擊它會提醒以下幾點：

button_1 
button_2

兩個按鈕點擊得到執行，因爲他們有相同的類名。我如何防止兩個按鈕被執行？我只需要點擊按鈕來執行，而不是全部。

我嘗試添加e.stopImmediatePropagation（），這是發生了什麼：

當我在第一個按鈕點擊我得到警報正確只執行button_1點擊，但是當我點擊第二個按鈕，只執行button_1單擊事件而不是button_2。

請幫忙。

注：的原因，我認爲這兩個執行是因爲有獲得追加到html 2個的JavaScript部分和兩個腳本對click事件上.button，但我不能改變這個代碼我需要以某種方式確保只有點擊的按鈕被執行。

來源

2013-03-08 GGio

不確定定位文檔點擊是您想要在此處執行的操作。什麼是不使用的理由：

$('.mybutton').on('click', function() { 
    /* YOUR CODE HERE */ 
});

這將完成你不強制文件的大背景下進入事件偵聽器尋找什麼。

來源

2013-03-08 16:21:50

寫click特定按鈕事件，而不是$(document)點擊。

<button type="button" class="mybutton" id="button_1">First Button</button> 
<button type="button" class="mybutton" id="button_2">Second Button</button>

JavaScript代碼應該是： -

$('#button_1').click(function(){ 
    //write your code here  

    }) 

    $('#button_2').click(function(){ 
    //write your code here  

    })

，或者您也可以通過類名

$('.mybutton').click(function(){ 
    var idval = $(this).attr('id'); 
    alert(idval); 

    //on the basis of particular id you can perform desired operation here 

    })

來源

2013-03-08 16:22:15 Roopendra

做，如果按鈕被動態生成的，你可能需要在事實上，使用您目前使用的事件委派模式：

$(document).on("click", ".mybutton", function(e) {...})

更多關於'直接和委託事件'的信息：http://api.jquery.com/on/

您確定沒有其他代碼在運行嗎？你的代碼似乎很好，因爲在這個小提琴在這裏：http://jsfiddle.net/8e3Gp/

來源

2013-03-08 16:40:55

而不是使用whoami作爲屬性，你可以使用id這將是一個更好的主意。對於按鈕的單擊事件，您只需使用它們都具有的共享className選擇按鈕集合，然後將clickhandler應用於該按鈕，然後$（this）將成爲單擊的特定按鈕。因爲您已經在執行e.preventDefault（），所以不需要返回false。

$(function(){ 
    $('.mybutton').on('click', function(e){ 
    e.preventDefault(); 
    alert($(this).attr('id')); 
    }); 
}); 

<button type="button" class="mybutton" id="button_1">First Button</button> 
<button type="button" class="mybutton" id="button_2">Second Button</button>

來源

2013-03-08 17:11:17 jaredwilli

的解決方案是以下內容：

$(".mybutton:not(.bound)").addClass("bound").on("click", function(e) { 
    e.preventDefault(); 
    alert("hello"); 
    return false; 
});

警報喂1次僅代替的2倍。

來源

2013-03-08 18:11:38 GGio

單擊一次即可執行JQuery三個按鈕單擊事件

回答

相關問題