jquery - 动态创建的按钮不起作用

Question

我有一段代码，当从日期选择器中选择日期时，它将链接插入到 p 标记中。

由于某种原因，这个动态创建的链接的 .click 函数不起作用 - 但如果我在完全相同的位置对按钮进行硬编码而不是动态插入它，它就会起作用。

有什么想法为什么会发生这种情况吗？

    $(document).ready(function(){

    $( "#MR1 > #datepicker" ).datepicker({
        beforeShowDay: function(date){ return [(date.getDay() == 1 || date.getDay() == 4), ""] },
        showOn: "button",
        buttonText: "Book now...",
        showWeek: true,
        firstDay: 1,
        onSelect: function(date) { $("#MR1 > #selecteddate").prepend("Date: " + $("#MR1 > #datepicker").val() + " - <a href='javascript:;' class='cleardate'>clear date</a>"); },
        dateFormat: "DD, d MM, yy",
        altField: "#datepickeralt",
        altFormat: "dd/mm/yy",
        navigationAsDateFormat: true,
        minDate: 0,
    });

    $("#MR1 > #selecteddate > .cleardate").click(function(){
        $("#MR1 > #selecteddate").html("");
        $("#MR1 > #datepicker").datepicker("setDate", null);
        $("#MR1 > #datepickeralt").val("");
    });

});

主体代码如下...

<div id="MR1">
<p id="selecteddate"></p>
<input type="text" id="datepicker" style="display:none;">
<input type="text" id="datepickeralt" disabled="disabled" style="display:none;">
</div>

Answer 1

您需要使用.live()方法代替。

$("#MR1 > #selecteddate > .cleardate").live('click',function(){
    $("#MR1 > #selecteddate").html("");
    $("#MR1 > #datepicker").datepicker("setDate", null);
    $("#MR1 > #datepickeralt").val("");
});

jQuery 事件根据页面加载时生成的 DOM 工作，因此之后的任何动态生成的内容都会被忽略。 .live() 使用 body 元素作为上下文，并查找您指定的选择器的任何匹配项，从而在添加内容后保持“绑定(bind)”。

我有一个similar problem ，这是一个相当常见的问题。