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（）。first（）被调用时，我找到了答案，选择了span标签，所以只需要在first（）之后添加next（）

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

如何在动态生成的手风琴关闭按钮中添加事件处理程序

2 个答案: