javascript - click event not working on new html with append , even using on -
this question has answer here:
hi creating new element , child of element beforesend
in ajax.
later on want show child element if click on parent...
$('#submit-task').on('click', function() { // variable declarations etc jquery.ajax({ // other data beforesend: function() { jquery('#' + month + ' .month-tasks-design').append( '<div class="month-task" data-id="' + next_id + '" style="width:0%;background: ' + colour + ';"><div class="task-info">name: ' + name + '<br />design hours: ' + design_hours + '<br />description: ' + description + '<br /></div></div>'); jquery('#' + month + ' .month-tasks-dev').append( '<div class="month-task" data-id="' + next_id + '" style="width:0%;background: ' + colour + ';"><div class="task-info">name: ' + name + '<br />development hours: ' + dev_hours + '<br />description: ' + description + '<br /></div></div>'); jquery('.month-tasks-design div[data-id=' + next_id + ']').animate({ width: design_width + '%'}, 1000, function() {}); jquery('.month-tasks-dev div[data-id=' + next_id + ']').animate({ width: dev_width + '%'}, 1000, function() {}); }, // other data }); }); $('.month-task').on('click', function(e) { if ( e.target !== ) { return; } var task_info = $(this).find('.task-info'); $(task_info).fadein(200); });
however nothing happens when click on .month-task
, work page loaded html, not newly generated html
try use event-delegation
@ context,
$(document).on('click','.month-task', function(e) { if ( e.target !== ) { return; } var task_info = $(this).find('.task-info'); $(task_info).fadein(200); });
note : in place of document, should use static parent appended element.
Comments
Post a Comment