多個按鈕單擊事件處理程序

Question

我在我的HTML模板

<div id="add"> 
    <fieldset> 
    </fieldset> 
    <input type="button" id="cancel" value="AddCancel"/> 
</div> 
<div id="update"> 
    <fieldset> 
    </fieldset> 
    <input type="button" id="cancel" value="UpdateCancel"/> 
</div> 

事件是有線了骨幹，爲按鈕下面。我碰到的是，我必須連線AddCancel事件和UpdateCancel事件等等。

而不是佈線每個取消按鈕事件，有沒有辦法我可以有1 cancel按鈕事件和處理程序，它可以識別哪個div被點擊的取消按鈕屬於？

Answer 1

如果你想只有一個事件。首先確保你的html是正確的，它不能有兩個具有相同ID的按鈕。使用類代替

<div id="add"> 
    <fieldset> 
    </fieldset> 
    <input type="button" class="cancelbtn" id="btn1" value="AddCancel"/> 
</div> 
<div id="update"> 
    <fieldset> 
    </fieldset> 
    <input type="button" class="cancelbtn" id="btn2" value="UpdateCancel"/> 
</div> 

下一頁使用此代碼jQuery中

$(".cancelbtn").on("click", function(e){ 
    var buttonType = $(this).attr("value") 
    if(buttonType == "AddCancel"){ 
     //AddCancel Button Clicked 
    }else{ 
     //UpdateCancel Button Clicked 
    } 
}); 

Answer 2

你可以這樣做：

var YourView ... 
    events: { 
     'click .cancel': 'cancel' 
    }, 

    cancel: function(event) { 
     var parent = event.currentTarget.parent(); // gets the parent of the clicked button 
     ... 
    } 
    ... 

和HTML：

<div id="add"> 
    <fieldset> 
    </fieldset> 
    <input type="button" class="cancel" value="AddCancel"/> 
</div> 
<div id="update"> 
    <fieldset> 
    </fieldset> 
    <input type="button" class="cancel" value="UpdateCancel"/> 
</div>