jQuery datepicker无法在动态生成的HTML上运行 [英] jQuery datepicker not working on dynamically generated HTML

问题描述

我有此代码:

<div id="infants-data"></div>

for( var i = 1; i <= 10; i++)
{ 
        var currInfantDataField = '' +
        '<div class="field">Infant ' + i + ': ' + 
         '<div style="width:600px">' + 
          '<select id="infant-'      + i + '-title" style="border:solid 1px #cccccc;">'+ 
           '<option selected>--Title--</option>'    +
           '<option value="master">Master</option>' + 
           '<option value="miss">Miss</option>'     +   
          '</select>' +
          '<input type="text" id="infant-' + i + '-surname" placeholder="Surname"  style="width:110px; border:solid 1px #cccccc;">' +
          '<input type="text" id="infant-' + i + '-othernames" placeholder="Othernames"  style="width:120px; border:solid 1px #cccccc;">' + 
          '<input type="text" id="infant-' + i + '-birthdate"  placeholder="Date of Birth"  style="width:120px; border:solid 1px #cccccc;" readonly>' + 
         '</div>' +
        '</div>';

        document.getElementById('infants-data').innerHTML += currInfantDataField;

        jQuery( "#infant-" + i + "-birthdate").datepicker({ 
        changeMonth: true,  
        changeYear: true, 
        yearRange:'1900:<?php echo ( date('Y') - 2 ); ?>',
        onSelect: (function(){doSomethingUsefulWithField("infant-" + i + "-birthdate")})
        });
}

由于某种原因，我无法解释，日期选择器无法正常工作.

For some reason I can't explain, the datepicker is not working.

PS 我尝试了此和其他几个人喜欢它，但是在我的情况下它们不起作用，因此我问了这个.

P.S I have tried this and several others like it but they did not work in my case, hence my asking this.

推荐答案

您的代码中有两个问题，#1是您继续添加日期选择器，然后覆盖整个innerHtml-破坏了添加的日期选择器. 另一个与事件处理程序有关，该事件处理程序对所有日期选择器使用相同的处理程序(具有相同的i值)(请参见下面的错误2).

You have two problems in your code, #1 is you keep adding a datepicker and then later overwrite the entire innerHtml - breaking the datepickers added. The other one is related to the event handler which uses the same handler (with same i value) for all datepickers (see fix at Bug#2 below).

解决错误#1的一种方法是添加所有html(并仅以提高效率而不是10次更新DOM的方式更新DOM)，然后创建所有日期选择器

One way to fix bug #1 is to add all the html (and update the DOM only once for efficency and not 10 times), and then create all the datepicker

请参见JSFiddle: http://jsfiddle.net/byhpc73L/2/

See JSFiddle: http://jsfiddle.net/byhpc73L/2/

错误#2:您遇到一个错误，该错误将参数"i"传递给onSelect处理程序-所有处理程序将使用相同的i，当循环结束时，该值将为11.您需要关闭以将当前i值绑定到函数-参见下文.

Bug #2: You have a bug passing the parameter "i" to the onSelect handler - all handlers will use the same i which will be 11 when the loop finishes. You need a closure to bind the current i value to a function - see below.

例如

for (var i=1; i<=10; i++) {  ... create html string ... }
.. update DOM from html string

for( var i = 1; i <= 10; i++) {
    jQuery( "#infant-" + i + "-birthdate").datepicker({ 
        changeMonth: true,  
        changeYear: true, 
        yearRange:'1900:2015',
        onSelect:(function(ii) { return function(){doSomethingUsefulWithField("infant-" + ii + "-birthdate")}
                           })(i)   /* note the function gets `i` and returns a function bound to the current value */
    });
}

这篇关于jQuery datepicker无法在动态生成的HTML上运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！