使用 Live() 将 Datepicker 应用于新创建的输入答案

【问题标题】：applying Datepicker to newly created input using Live()使用 Live() 将 Datepicker 应用于新创建的输入
【发布时间】：2010-07-12 18:46:56
【问题描述】：

我在使用 jQuery 日期选择器时遇到问题。我的表单有一个“添加另一个”按钮，为用户提供额外的一行，以便他们可以输入多个匹配项。我希望日期显示日期选择器，并找到了如何使用 live() 函数来完成它

        $(function() {
        $('#AddAnother').bind('click', function(event) {
            var tablerow = $('#CreateMatch tr:last').html();
            $('#CreateMatch tr:last').after('<tr>' + tablerow + '</tr>');
        });

        $('input.Datetime').live('click', function() {
            $(this).datepicker({
                showOn: 'focus',
                changeMonth: true,
                changeYear: true,
                dateFormat: "dd-mm-yy"
            }).focus();
        });

    });

如您所见，AddAnother 绑定用于构建新行，.live 功能应将其应用于带有 Datetime 类的新添加的文本框。用 chrome 检查元素表明它们的文本框正在获取 jQuery 添加到它们的“hasDatePicker”类，但我认为这只是因为它如何复制行。

这是我所有的html：

<div id="MatchForm">
        <table id="CreateMatch">
            <tr>
                <th>Prospect</th>
                <th></th>
                <th>Opponent</th>
                <th>Match Date</th>
                <th>Location</th>
            </tr>
            <tr>
                <td>
                    <select name="Prospect">
                        <option value="">Select prospect...</option>
                        <% foreach (var p in Model.AllProspects){  %>
                        <option value="<%= p.BoxerId %>"><%= p.BoxerNameReverse %></option>
                        <%} %> 
                    </select>
                </td>    
                <td>vs</td>
                <td>
                    <select name="opponent">
                        <option value="">Select opponent...</option>
                     <% foreach (var p in Model.AllBoxers   )
                       {  %>
                        <option value="<%= p.BoxerId %>"><%= p.BoxerNameReverse %></option>
                    <%} %> 
                    </select>                    
                </td>
                <td><input type="text" class="Datetime" name="matchDate" style="width:100px" /></td>
                <td><input type="text" id="Location" name="Location" style="width:100px" /></td>
            </tr>
        </table>
        <input type="button" name="AddAnother" id="AddAnother" value="Add Another" />
        <input type="submit" name="submit" value="Submit" />
    </div>

所以您知道它确实适用于加载的第一个文本框，但实时绑定似乎不起作用并将其应用于新文本框！

【问题讨论】：

标签： jquery datepicker

【解决方案1】：

“live()”工具仅用于事件处理。因此，设置日期选择器的代码只会在“点击”事件发生时发生。日期选择器代码此时不会设置它使用的处理程序。

您可以尝试让您的事件处理程序在元素上保留一个标志（使用 jQuery 的“data()”工具）。如果你看到一个没有标志的元素，那么点击处理程序可以设置日期选择器和标志，并在其自身上触发另一个“点击”。不过我没试过。

【讨论】：

【解决方案2】：

这里的问题是，当.datepicker() 被应用时，它会在输入中添加一个名为hasDatepicker 的类，如果找到它，就不会再次绑定。如果您在被克隆的行上打开一个日期选择器，它会添加这个类......并将该类复制到未来的行中会使它们没有日期选择器。

要解决这个问题，只需在克隆行时删除类，如下所示：

$('#AddAnother').bind('click', function(event) {
    $('#CreateMatch tr:last').clone().appendTo('#CreateMatch')
                             .find('input.Datetime')
                             .removeClass('hasDatepicker');
});

You can give it a try here.

【讨论】：