如何在手風琴的關閉按鈕中添加事件處理程序動態生成

Question

我有一個手風琴，我使用jquery動態創建並在手風琴的頭部添加了一個關閉按鈕，該按鈕也具有事件處理程序，但事件處理程序沒有獲取關閉按鈕被點擊時 這裏被稱爲是HTML

<div class="main span10"> 
    <div class="well span4"> 
     <h2>Add New Bill</h2><hr/> 
     <label>Bill Number</label> 
     <input type="text" class="span3" id="bill_number" placeholder="Enter The Bill Number"/> 
     <label>Date</label> 
     <input type="text" class="span3 " id="date" placeholder="Enter The Purchase Date"/> 
     <label>Bill description</label> 
     <input type="text" class="span3" id="bill_description" placeholder="Enter The Item"/> 
     <label>Quantity</label> 
     <input type="text" class="span3" id="quantity" placeholder="Enter The Quantity"/> 
     <label>Price</label> 
     <input type="text" class="span3" id="price" placeholder="Enter The Price "/> 
     <br/> 
     <button class="btn btn-primary submit" id="add">Add</button> 
    </div> 
    <div class="well span4" id="popup"> 
     <div id="accordion"></div><br> 
     <button class="btn btn-primary" id="save">Save</button> 
    </div> 
</div> 

，這裏是jQuery的：

$('#myModal').hide(); 
$("#popup").hide(); 
$("#date").datepicker(); 
$("#accordion").accordion({fillSpace:true,icons:{'header':'ui-icon-plus'},event:'mouseover'}); 

$('#add').click(function() { 
    $("#popup").show();   
    var bn = $("#bill_number").val(); 
    var date=$("#date").val();   
    var bd=$("#bill_description").val();    
    var qn=$("#quantity").val();    
    var pr=$("#price").val();   
    var header="item "+indicator;   
    var total=qn*pr;    

    data = data+"\"item" + indicator+"\":[\""+bn+"\",\""+date+"\",\""+bd+"\",\""+qn+"\",\""+pr+"\","+"\""+total+"\"],"; 

    var description = "Bill description: "+bd+"<br>quantity: "+qn+"<br>price: "+pr+""; 
    indicator++;    

    $("#accordion").append("<h3>"+header+"<a href='#' onclick='return false' class='close' id='acc_close'>x</a></h3><div>"+description+"</div>").accordion("refresh"); 
}); 


$("#save").click(function() { 
    data=data.substring(0,data.length - 1);   
    data += '}';  
    alert(data);   

    $.post("add.php", {datas:data}, function(info,status) { 
     $('#info').html(info); 
    }); 
} 

Answer 1

嘗試

$("#accordion").append("<h3>"+header+"<a href='#' class='close' id='acc_close'>x</a></h3><div>"+description+"</div>").accordion("refresh"); 

$('.close').on('click', function() { 
    // Perform close 
}); 

或者

var el = $("<h3>"+header+"<a href='#' class='close' id='acc_close'>x</a></h3>"); 
$("#accordion").append(el); 
$("#accordion").append("<div>"+description+"</div>"); 
el.children().first().click(function() { 
    // Perform close 
}); 

作爲一個側面說明，如果你在回調說return false關閉按鈕就乾脆什麼也不做。

Answer 2

我找到了答案時el.children（）。第一個（）被調用時選擇的範圍標記，因此只需要後添加下一個（）第（）

var el = $("<h3>"+header+"<a href='#' class='close' id='acc_close'>x</a></h3>"); 
$("#accordion").append(el); 
$("#accordion").append("<div>"+description+"</div>"); 
el.children().first().next().click(function() { 
    // Perform close 
});