Question

我遇到了jQuery datepicker的问题。我的表单有一个“添加另一个”按钮，为用户提供额外的行，以便他们可以输入多个匹配项。我希望日期显示日期选择器，并找到如何使用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>

所以你知道它在第一个加载的文本框上工作但是实时绑定似乎不起作用并将其应用于新的文本框！

Answer 1

“live（）”工具仅与事件处理有关。因此，只有当“点击”事件发生时，才会发生设置日期选择器的代码。 datepicker代码不会设置它在那时使用的处理程序。

您可以尝试让事件处理程序在元素上保留一个标志（使用jQuery的“data（）”工具）。如果你看到一个没有标志的元素，那么click处理程序可以设置datepicker和flag，并触发另一个“click”。然而，我没有尝试过。

Answer 2

这里的问题是，当.datepicker()被应用时，它会向称为hasDatepicker的输入添加一个类，如果找到它，则不再绑定。如果你在克隆的行上打开一个日期选择器，它会添加这个类......并且将类复制到将来的行会使它们不再是datepicker。

要解决此问题，请在克隆行时删除该类，如下所示：

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

You can give it a try here

使用Live（）将Datepicker应用于新创建的输入

2 个答案: