2013-03-24 64 views
0

我有兩個不同的按鈕。這兩種方式在點擊時運行JQuery函數'ShowCommentBox' 但是,當點擊第二個按鈕時,我想沿'SHowCommentBox'加載額外的JQuery函數 - 附加功能允許在屏幕上顯示額外的選項。2個按鈕之一有額外的功能

<input id="SubmitCommentsForBOQ" type="button" value="Comments" onclick="ShowCommentBox('<%: item.ItemCode %>'')" /> 

以上是第二個按鈕,我想也運行

$("#SubmitCommentsForTwo").click(function() { 
     $("#hiddenBox").show(); 
    }); 

,這使得可見的額外功能...我怎樣才能做到這一點?

謝謝你的任何答覆

以下是原始JQuery的:它加載一個對話框

function ShowCommentBox(itemIdentifier, labourOrPlant, desc) { 
     id = itemIdentifier; 
     LabouringOrPlanting = labourOrPlant; 
     description = desc; 
     Function.DisplayBox(itemIdentifier); 
     $("#LabourOrPlantDialog").dialog({ modal: true }); 
    } 

和我的其他代碼:

<div id="LabourOrPlantDialog" title="Comments" style="display:none;"> 
<table class="detailstable FadeOutOnEdit"> 
    <tr> 
     <th>Item</th> 
    </tr> 
    <tr> 
     <td id="Item"></td> 
    </tr> 
</table>  
<br /> 

     <textarea id="ExistingComments" type="text" runat="server" rows="7" cols="30" 
     maxlength="2000"> </textarea> 
     <input id="SubmitComment" type="button" value="Submit" 
      onclick="SubmitButton()" /> 

<br /> 

<div id="hiddenBox"> 
<input type="text" name="BoqTextBox" id="BoqTextBox" value="7.15" /> 
</div> 
</div> 
+0

如果您有兩個不同的按鈕,爲什麼不只是更改第二個按鈕的onclick函數?他們是兩個單獨的DOM元素,對嗎? – antinescience 2013-03-24 21:11:14

回答

1

這是最好的separate behavior from markup。您可以使用HTML data-屬性解決這兩個問題。

首先嵌入在HTML中的數據:

<input id="SubmitCommentsForBOQ" type="button" value="Comments" 
    data-item-code="<%: item.ItemCode %>" /> 

相反的onclick,僅使用jQuery綁定事件處理程序,並執行所有你需要在一次行動:

$("#SubmitCommentsForBOQ").click(function() { 
    var itemCode = $(this).data('itemCode'); 
    ShowCommentBox(itemCode); 
}); 

$("#SubmitCommentsForTwo").click(function() { 
    $("#hiddenBox").show(); 
    var itemCode = $(this).data('itemCode'); 
    ShowCommentBox(itemCode); 
}); 

多個處理程序將按照它們綁定的順序執行,所以你也可以這樣做:

// happens first, but only for this specific button 
$("#SubmitCommentsForTwo").click(function() { 
    $("#hiddenBox").show(); 
}); 

// happens for all buttons 
$("input[data-item-code]").click(function() { 
    var itemCode = $(this).data('itemCode'); 
    ShowCommentBox(itemCode); 
}); 
相關問題