javascript - 如何在动态创建的文本字段上创建日期选择器？

Question

这是我的文本字段:

<input type='text' id='activationdate' name='activationdate' style='height:"+height*2.5/100+"px;font-size:"+height*2.3/100+"px' class='activationdate'/>

动态创建的文本字段将如下所示:

<input type='text' id='activationdate"+temp+"' name='activationdate' style='height:"+height*2.5/100+"px;font-size:"+height*2.3/100+"px' class='activationdate'/>

每次创建动态文本框时，temp 都会通过 javascript 增加 +1，并且 temp 从 1 开始

现在这是我的 jquery 日期选择器代码:

$( document ).ready(function() {
    $('input[id^="activationdate"]').on('click', function() { 
    $(this).datepicker({
            changeMonth: true,
            changeYear: true
        });
    });
});

但是它不起作用。请帮忙............

Answer 1

您需要使用Event Delegation使用.on() 动态创建元素的委托(delegate)事件方法。

使用

$(document).on('click', 'input[id^="activationdate"]', function() {
    $(this).datepicker({
        changeMonth: true,
        changeYear: true
    });
});

编辑

创建元素后应用插件而不是使用事件委托(delegate)

function addDataUpper(){
    //Your Existing code

    //Add Plugin
    $('#activationdate'+temp).datepicker({
        changeMonth: true,
        changeYear: true
    });     
    return false;        
}