2 개의 버튼에는 추가 기능이 있습니다

Question

두 개의 다른 버튼이 있습니다. 둘 다 클릭 할 때 JQuery 함수 'ShowCommentBox'가 실행됩니다. 두 번째 버튼을 클릭하면 'ShowCommentBox'와 함께 추가 JQuery 함수를로드하려고합니다.이 함수는 화면에 추가 옵션을 허용합니다.

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

위 나는 또한 눈에 보이는 추가 기능을 만드는

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

을 실행하려면 두 번째 버튼은 내가이 작업을 수행 할 수있는 방법입니다 ...? 대화 상자를

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

을로드하고 내 다른 코드 :

는 아래

원래 JQuery와입니다 답변 주셔서 감사합니다

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

Answer 1

그것은 separate behavior from markup하는 것이 가장 좋습니다. HTML data- 속성을 사용하여 두 가지 문제를 모두 해결할 수 있습니다.

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

여러 핸들러를

는 먼저 HTML의 데이터를 포함 바인딩 된 순서대로 실행되므로 다음과 같이 할 수도 있습니다.

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