Question

我有一段代码，当从datepicker中选择日期时，会将链接插入到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元素作为上下文，并查找您指定的选择器的任何匹配项，从而在添加内容后保持“绑定”。

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

Answer 2

动态添加元素时，您需要使用.live代替.click。

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

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

2 个答案: