How to detect new element created in HTML by jQuery?

Question

i'm new in jQuery and i'm wonderin how to solve this issue. I marked the Delete to show the link thru this code:

$('a[id^="del"]').css('border','red 1px solid');

Initial table

The problem is when I added a new Activity thru this code:

function addGradebkhdr() {

var formData = formToJSON();

    $.ajax({
      type: 'post',
      contentType: 'application/json',
      url: 'http://samle.com/api',
      dataType: "json",
      data: formData,
      success: function(data, textStatus, jqXHR){
        **addTableGradebkhdr(data);**
      },
      error: function(jqXHR, textStatus, errorThrown){
        // handle error
      }
    });
 }

function addTableGradebkhdr(data) {

  var lr = $(".tb-gradebkhdr tbody tr:last-of-type");
  var no = parseInt($(".tb-gradebkhdr tbody tr:last-of-type td:first-of-type").text());
  var ctr = no + 1;
    var d = new Date(data.date);
    var day = d.getDate();
    var month = d.getMonth() + 1; //Months are zero based
    var year = d.getFullYear();
    var sDate = month + "/" + day + "/" + year;

    var row = '<tr id="'+ data.id +'" ><td>'+ ctr +'</td>';
            row += '<td>'+ data.criteria_name +'</td>';
            row += '<td>'+ data.rawhigh +'</td>';
            row += '<td>'+ sDate +'</td>';
            row += '<td>'+ data.quarter +'</td>';
            row += '<td>'+ data.remarks +'</td>';
            row += '<td>';
            row += '<a gradebkhdrid="'+ data.id +'" id="edit-'+ data.id +'" href="#">Edit</a> ';
            row += '<a gradebkhdrid="'+ data.id +'" id="del-'+ data.id +'" href="#">Delete</a>';
            row += '</td></tr>';
        lr.after(row);


}


$(document).ready(function(){

$("#frmBtn-grbkhdr-save").on('click',**addGradebkhdr**);

$('a[id^="del"]').each(function(){
    $(this).on("click",function() {
            var gradebkhdrid = $(this).attr('gradebkhdrid');    
        deleteGradebkhdr(gradebkhdrid);
        });     
  });
});

and the Table become like this:

fasd

as you can see the last Delete was not detected by

$('a[id^="del"]').each(function(){
    $(this).on("click",function() {            
        var gradebkhdrid = $(this).attr('gradebkhdrid');
        deleteGradebkhdr(gradebkhdrid);
     });
});

The red border was not a part of the table. I used it to track the event/error trapping. As you can see in the 1st image,the page was loaded and all the Delete link was marked red. It means the Delete link all work.

But when I added a new Activity via jQuery ajax function to submit the form and created a Table Row and its element inside including the Delete button. The added delete link was not working and the red line I created was not applied also an as you can see un the 2nd image.

Regarding adding red borders why don't you do it in your CSS stylesheet? Then it would automatically apply to dynamically added elements. You don't need JS (or jQuery) to do it. — nnnnnn
– nnnnnn, Commented Oct 2, 2012 at 6:35

Guffa · Accepted Answer · 2012-10-02 06:42:31Z

1

There is two aspects to this problem, with two separate solutions.

Add a class to the delete button so that you can target them with plain CSS without changing the style of the elements directly:

row += '<a gradebkhdrid="'+ data.id +'" id="del-'+ data.id +'" class="delButton" href="#">Delete</a>';

Now you can use this CSS to set the border, and it will also work for newly added elements.

.delButton { border: 1px solid red; }

To handle the click events on added elements you use a delegate:

$('.tb-gradebkhdr').on('click', 'a[id^="del"]', function(){
  var gradebkhdrid = $(this).attr('gradebkhdrid');    
  deleteGradebkhdr(gradebkhdrid);
});

The event handler will be bound on the table and catches the event when it bubbles up, so it will work for newly added elements too.

answered Oct 2, 2012 at 6:42

Guffa

703k112 gold badges760 silver badges1k bronze badges

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

3 Comments

Rosmarine Popcorn Over a year ago

a better approach is using Javascript Mutation Event's developer.mozilla.org/en-US/docs/DOM/Mutation_events

Guffa Over a year ago

@Cody: Why would that be a better approach? Why look for changes, when you can set up CSS and event handlers that works without looking for changes? Besides, on the page that you link to it says that they are deprecated because the design is flawed...

nnnnnn Over a year ago

@Cody - not only are they deprecated, they never worked cross-browser.

freakish · Accepted Answer · 2012-10-02 06:43:18Z

1

So you are saying that you want to attach click event to nonexisting elements as well ( which will exist in the future )? Try this:

$(document).on( 'click', 'a[id^="del"]', function(){      
    var gradebkhdrid = $(this).attr('gradebkhdrid');
    deleteGradebkhdr(gradebkhdrid);
});

You can change document with a holder of all these rows, for example $( '#myTable' )....

As for CSS: add custom class to a tags and style it properly in a seperate stylesheet file ( or <style> tag ).

edited Oct 2, 2012 at 6:43

answered Oct 2, 2012 at 6:37

freakish

57k12 gold badges141 silver badges181 bronze badges

1 Comment

jrsalunga Over a year ago

this works for me! i think the issue is the code:

$('a[id^="del"]').each(function(){     $(this).on("click",function() {             var gradebkhdrid = $(this).attr('gradebkhdrid');             deleteGradebkhdr(gradebkhdrid);         });        }); });

David Slavík · Accepted Answer · 2012-10-02 06:37:10Z

0

you can usee live function of jQuery: http://api.jquery.com/live/

or you can add handler explicitely in function "addTableGradebkhdr" when row is creating

answered Oct 2, 2012 at 6:37

David Slavík

1,1921 gold badge15 silver badges24 bronze badges

2 Comments

Prem Over a year ago

Its not yet deprecated. going to be deprecated. right now, it works.

freakish Over a year ago

@prem Quote from the documentation: As of jQuery 1.7, the .live() method is deprecated. Do you understand what that word means? It means exactly that it works, but will not somewhere in the future. Thus it should be avoided.

Daniel · Accepted Answer · 2012-10-02 06:42:35Z

0

If you are expecting your table to have rows on page load, and your front end functions are attached at the same time, you can use jquery.clone() function to copy a previous row and alter the contents afterwards. This will save you some code and also apply previous listeners to the new element.

var newRow = $("table tr:last").clone(true);
$(newRow).find("td:eq(0)").html("new data for column 1");

$(newRow).insertAfter(row);

answered Oct 2, 2012 at 6:42

Daniel

3,8165 gold badges32 silver badges52 bronze badges

Comments

Anoop · Accepted Answer · 2012-10-02 06:46:31Z

0

You should recall $('a[id^="del"]').css('border','red 1px solid'); you are not using CSS so border will get applied to already added elements only which you are selecting through jQuery.

...your code
....
lr.after(row);
$('a[id^="del"]').css('border','red 1px solid');

OR

you can directly set border color

row += '<a style="border:red 1px solid;" gradebkhdrid="'+ data.id +'" id="del-'+ data.id +'" href="#">Delete</a>';

You can use jQuery.live

$('a[id^="del"]').live(function() {            
     var gradebkhdrid = $(this).attr('gradebkhdrid');
     deleteGradebkhdr(gradebkhdrid);
});

edited Oct 2, 2012 at 6:46

answered Oct 2, 2012 at 6:38

Anoop

23.2k10 gold badges65 silver badges79 bronze badges

Comments

david9 · Accepted Answer · 2012-10-02 06:47:40Z

0

you can try with this

....
lr.after(row);
$("a[id^='del']:last").css('border', 'red 1px solid');

answered Oct 2, 2012 at 6:47

david9

1699 bronze badges

Comments

Prem · Accepted Answer · 2012-10-02 06:48:11Z

0

You can do this in 2 ways.

1) you can define the style in stylesheet
2) you can apply the style with javascript by calling the same line from a live binding function. you can do live binding usign jquery's on() function from http://api.jquery.com/on/
Here, as your script is using, id starts with 'del', your adding element should have delete link id that start with 'del', if you are using the same script. Its better you fix a class for that delete link and update your script line as below

$('a[class="deleteLink"]').css('border','red 1px solid');

Hope it helps.

answered Oct 2, 2012 at 6:48

Prem

6,0043 gold badges28 silver badges24 bronze badges

Collectives™ on Stack Overflow

How to detect new element created in HTML by jQuery?

7 Answers 7

3 Comments

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related