CODEWITHSUNDEEP
javascriptjqueryhtml
Bambang Gito Raharjo
Bambang Gito Raharjo

Reputation: 13

jQuery not work after event

i have a button to add new input. that input have same class(commonClass). first input the datepicker nothing problem or show correctly. then i click button, show 2nd input with class name commonClass(same as 1st input). but the datepicker didn't work. i tried using $('[input^=start_date]') and $('.commonClass') didnt work too. i also tried("#start_date0, #start_date1,etc") didnt work too.

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'
});

for 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>

thank you very much.

Upvotes: 1

Views: 36

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388436

For the newly added elements, you need to initialize the plugin after those elements are created

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'
    });
}

Upvotes: 1

Related Questions