javascript - 事件发生后 jQuery 不工作

Question

我有一个按钮来添加新输入。该输入具有相同的类(commonClass)。首先输入日期选择器没有问题或显示正确。然后我单击按钮，显示第二个输入，其类名为 commonClass(与第一个输入相同)。但日期选择器不起作用。我尝试使用 $('[input^=start_date]') 和 $('.commonClass') 也不起作用。我也尝试过(“#start_date0，#start_date1等”)也不起作用。

var level1=0;
function tambah_level1() {
    level1=level1+1;
    var addin='<tr id="level1-'+level1+'"><td><input type="text" id="start_date'+level1+'" class="commonClass" name="start_date[]"><td><button type="button" onclick="hapus_level1('+"'#"+'level1-'+level1+"'"+')">Hapus</button></td></tr>';

    $('#addNew').append(addin);
}

function hapus_level1(id) {
    $(id).remove();
}

$(function(){
$(".commonClass").simpleDatepicker({ 

    dateFormat: 'yy-mm-dd',
    changeMonth: true,
    changeYear: true,
    timeFormat: 'hh:mm:ss'
});

对于 html :

<tr id="level1">
    <td>Tanggal : </td>
    <td>
    <button type="button" onclick="tambah_level1()"> Tambah Tanggal</button></br>
    <table id="addNew" border=1>
    <tr>
        <th>Tanggal</th>
        <th>Action</th>
    </tr>
    <tr>
        <td><input type="text" name="start_date[]" id="start_date0" class="commonClass"></td>
        <td>-</td>
    </tr>
    </table>
    </td>
</tr>

非常感谢。

Answer 1

对于新添加的元素，您需要在创建这些元素后初始化插件

var level1 = 0;
var level2 = 0;
var level3 = 0;

function tambah_level1() {
    level1 = level1 + 1;
    var addin = '<tr id="level1-' + level1 + '"><td><input type="text" id="start_date' + level1 + '" class="commonClass" name="start_date[]"><td><button type="button" onclick="hapus_level1(' + "'#" + 'level1-' + level1 + "'" + ')">Hapus</button></td></tr>';

    var $tr = $(addin).appendTo('#addNew');
    createDatePicker($tr.find(".commonClass"));
}

function hapus_level1(id) {
    $(id).remove();
}

$(function () {
    createDatePicker(".commonClass"); //for existing elements
});

function createDatePicker(els) {
    $(els).simpleDatepicker({
        dateFormat: 'yy-mm-dd',
        changeMonth: true,
        changeYear: true,
        timeFormat: 'hh:mm:ss'
    });
}