on click function not being called when adding html dynamically

Question

I have a list in which I have links, on the clicks of those links I am doing stuff. Those links can be added dynamically. For example, I have a input form on the page and when the user fills that form I update the list by appending a new element into the list.

Here is the code for my list

<section id="mealPerDay">
@foreach (MealPerDay mpd in Model.GetMealPerDay())
{
    <div class="panel radius @String.Concat("panel_", mpd.Id)">
        <span>@mpd.Name</span>
        <a class="right edit-margin-left edit showHideEditDailyMeal" data-id="@mpd.Id" data-container="mealPerDay" data-cancel=" ">edit</a>
    </div>

}
</section>

When the page loads user sees this list and click function is called like this

  $('.showHideEditDailyMeal').click(function (event) {
    event.preventDefault();
    var container = $(this).data('container');
    var id = $(this).data('id');
    var cancel = $(this).data('cancel');
    if (cancel == ' ') {
        $('#' + container + ' div.panel.panel_' + id + ' a.cancel-edit').show();
        $('#' + container + ' div.panel.panel_' + id + ' a.edit').hide();
        $('#' + container + ' .edit-form.edit_form_' + id).show();
    } else {
        $('#' + container + ' div.panel.panel_' + id + ' a.cancel-edit').hide();
        $('#' + container + ' div.panel.panel_' + id + ' a.edit').show();
        $('#' + container + ' .edit-form.edit_form_' + id).hide();
    }
});

This works fine, now if I add something, I append it to the list like this

function newGenerateHtml(result, container, classNameForDelete, classNameForEdit, classNameForShowHideEdit) {
var html = '<div class="panel radius panel_' + result.id + '">';
html += '<span>';
html += result.name;
html += '</span>'
html += '<a class="right edit-margin-left edit ' + classNameForShowHideEdit + '" data-id=' + result.id + ' data-container=' + container + ' data-cancel=" ">edit</a>';
html += '</div>';

return html;
}

The mark up I get is similar to the data which load when the page loads. But the click event on the dynamically added data is not working.

Kartikeya Khosla · Accepted Answer · 2014-12-02 11:14:03Z

1

Because you are generating HTML dynamically try using event delegation.

Instead of

$('.showHideEditDailyMeal').click(function (event) {

Try

$(document.body).on('click','.showHideEditDailyMeal',function(event){

answered Dec 2, 2014 at 11:14

Kartikeya Khosla

18.9k8 gold badges46 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mohsinali1317 Over a year ago

It works. Thanks. But can you explain why do we have to do that?

Kartikeya Khosla Over a year ago

@mohsinali1317...because element with class .showHideEditDailyMeal was not there intially on your page when first time your page loaded...as you are appending html from jquery so in that case you have to use event delegation as specified in answer.

jogesh_pi · Accepted Answer · 2014-12-02 11:14:16Z

1

use .on()

$('body').on('click', '.showHideEditDailyMeal', function (event) {
event.preventDefault();
var container = $(this).data('container');
var id = $(this).data('id');
var cancel = $(this).data('cancel');
if (cancel == ' ') {
    $('#' + container + ' div.panel.panel_' + id + ' a.cancel-edit').show();
    $('#' + container + ' div.panel.panel_' + id + ' a.edit').hide();
    $('#' + container + ' .edit-form.edit_form_' + id).show();
} else {
    $('#' + container + ' div.panel.panel_' + id + ' a.cancel-edit').hide();
    $('#' + container + ' div.panel.panel_' + id + ' a.edit').show();
    $('#' + container + ' .edit-form.edit_form_' + id).hide();
}
});

answered Dec 2, 2014 at 11:14

jogesh_pi

9,7745 gold badges40 silver badges65 bronze badges

2 Comments

mohsinali1317 Over a year ago

It works. Thanks. But can you explain why do we have to do that?

jogesh_pi Over a year ago

@mohsinali1317, Because .on() also takes care of dynamic elements too, but with .click() event you have to make ready your script again to work with dynamic element.

Rex Rex · Accepted Answer · 2014-12-02 11:20:41Z

1

use on or live Instead of

$('.showHideEditDailyMeal').click(function (event) {
Try

$(document.body).on('click','.showHideEditDailyMeal',function(event){

or

$(document.body).live('click','.showHideEditDailyMeal',function(event){

answered Dec 2, 2014 at 11:20

Rex Rex

1,0301 gold badge8 silver badges30 bronze badges

3 Comments

mohsinali1317 Over a year ago

It works. Thanks. But can you explain why do we have to do that?

Kartikeya Khosla Over a year ago

using .live() is not all a good idea because it is depricated in jquery 1.7 and now removed after jquery 1.9 versions.

Rex Rex Over a year ago

Yes ,But if jquery version is below 1.9 'on' will not work.Thats why i mentioned

Collectives™ on Stack Overflow

on click function not being called when adding html dynamically

3 Answers 3

2 Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related