jQuery не работает после события

Question

У меня есть кнопка для добавления нового ввода. это вход есть такой же класс (commonClass). сначала введите datepicker ничего, или покажите правильно. затем нажмите кнопку мыши, покажите второй вход с именем класса 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' 
    }); 
}