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

I have a piece of code which inserts a link into a p tag when a date is selected from the datepicker.

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

For some reason the .click function of this dynamically created link does not work - but it does work if I hard code the button in exactly the same place rather than inserting it dynamically.

由于某种原因，这个动态创建的链接的.click功能不起作用 - 但如果我在完全相同的位置硬编码按钮而不是动态插入它，它确实有效。

Any ideas why this is happening??

任何想法为什么会这样？

    $(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("");
    });

});

body code as follows...

身体代码如下......

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

2 个解决方案

#1

You need to use the .live() method instead.

您需要使用.live（）方法。

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

jQuery events work from the DOM generated at the page load, and thus any dynamically generated content after is ignored. .live() uses the body element as context and finds any matches for the selector you specified, thus maintaining the "bind" after the content has been added.

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

I had a similar problem, it's a fairly common question.

我有类似的问题，这是一个相当常见的问题。

#2

you need to use .live instead of .click when dynamically adding elements.

在动态添加元素时，您需要使用.live而不是.click。

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

#1