CODEWITHSUNDEEP
javascriptjqueryajaxdynamic-content
evade
evade

Reputation: 139

JQuery and Ajax calls on newly created elements

I am fairly new to Ajax and JQuery and have been doing a ton of reading and cannot find a solution that will work for me.

I have a JQuery on.click trigger calling an function via Ajax to update my page without reloading it entirely. However, these new elements being created cannot have this function triggered on it as well.

The function below essentially adds a <tr> to the end of a table. This new <tr>'s <a> elements added cannot trigger this same function after the has been added.

$("a.add-department").on( "click", function(e) 
{
    e.preventDefault();

    bootbox.dialog({
        message: '<form class="form-horizontal row-border"><div class="form-group"><label class="col-md-2 control-label">Name:</label><div class="col-md-10"><input type="text" id="department-name-add" value="" class="form-control"></div></div></form>',
        title: "Add a Department",
        buttons: {
            success: {
                label: "Add",
                className: "btn-success",
                callback: function() {
                    var name = $("#department-name-add").val();;
                    $.ajax({
                        type: "POST",
                        url: "/departments/add",
                        dataType: "json",
                        data: 'name=' + name,
                        success: function(result){
                            if (result.success == 1)
                            {
                                $('#table-departments > tbody:last').append('<tr id="'+result.id+'"><td id="td-'+result.id+'">'+result.name+'</td><td id="td-actions-'+result.id+'"><a data-name="'+result.name+'" data-id="'+result.id+'" data-toggle="modal" class="btn btn-xs btn-danger delete-department confirm-dialog">Delete</a> <a id="a-edit-'+result.id+'" data-name="'+result.name+'" data-id="'+result.id+'" data-toggle="modal" class="btn btn-xs btn-primary edit-department">Edit</a></td></tr>');
                            }
                        },
                        error: function(result){
                        }
                    });
                }
            },
            danger: {
                label: "Cancel",
                className: "btn-danger",
                callback: function() {
                    console.log('Cancelled Request');
                }
            },
        }
    });
});

I've tried a combination of using .on versus just .click as well as tying id's to each element.

Any thoughts?

Also, I know the code is most likely considered ugly, I am just trying to understand how to solve this.

Thanks

Upvotes: 1

Views: 1650

Answers (2)

Ehsan Sajjad
Ehsan Sajjad

Reputation: 62488

you have to do event delegation if the elements are loaded dynamically via ajax, as you are appending html in table with id table-departments you can use that this way :

$("#table-departments").on("click", "a.add-department", function(){



})

and for edit:

 $("#table-departments").on("click", "a.edit-department", function(){



    })

Upvotes: 2

bottens
bottens

Reputation: 3892

You need to use event delegation instead. That way new elements added can trigger the event.

Here is a link to learn more about event delegation: http://learn.jquery.com/events/event-delegation/ Event delegation looks like this:

$(document).on("click", "a.add-department", callback)

Upvotes: 4

Related Questions