CODEWITHSUNDEEP
jquery
supercoolville
supercoolville

Reputation: 9086

Run jquery on newly created elements

I have a jquery script which runs when the document is ready. It appends each of the existing elements "div.cool" with the text "[hi]" at the end.

Then I have an ajax script which loads new elements. When new elements are added with the class "div.cool", the jquery script doesnt append them.

What can I do to run the script when new elements are created?

Example:

http://jsfiddle.net/csDyM/3/

HTML:

<div class="container">
    <div class="cool">some text.</div>
    <div class="cool">some text.</div>
    <div class="cool">some text.</div>
    <div class="cool">some text.</div>
</div>

<a href="#_" onclick="loadmore();">ajax more</a>

Javscript:

$(document).ready(function() {
    $("div.cool").append("[hi]");
});

function loadmore () {

    // this for loop represents the ajax dynamic content. it cannot be changed. 
    for (i=1;i<=4;i++) {
        $("div.container").append('<div class="cool">some text.</div>');
    } 

     // $("div.cool").append("[hi]"); adding this works but it appends existing elements
}

The AJAX (replaced with for loop in exapmle):

$.ajax({
    url: http://url.com/file.php,
    cache: false,
    success: function(html){
        $("div.container").html(html);
    }
});

Upvotes: 0

Views: 1204

Answers (8)

jfriend00
jfriend00

Reputation: 707308

The most efficient way to append new elements received from an ajax call is to process the new elements right when they are first available in the success handler for the ajax call and only run the script on the new elements, not all the previous elements.

Edit:

Now, that you've shown us your ajax code, if what you're trying to do is to append("[hi]") on all new div.cool objects, then you can change your ajax code to this which will just process the new HTML as it arrives from the ajax call before it's inserted into your page. Since it operates only on the newly arrived HTML, it won't modify anything else on the page.

$.ajax({
    url: "http://url.com/file.php",
    cache: false,
    success: function(html){
        var newHTML = $(html);
        newHTML.find("div.cool").append("[hi]");
        $("div.container").empty().append(newHTML);
    }
});

Your ajax code looks a little odd to me because it's replacing all previous elements and I assumed you were adding new elements to what previously existed like your previous sample code. Are you sure you posted the correct ajax code?

Upvotes: 1

Adam
Adam

Reputation: 1694

  • Get the number of existing div.cool:

    var original_number = $("div.cool").length;

  • Create new elements using ajax.

  • Get new number of div.cool:

    var new_number = $("div.cool").length;

  • Using a for loop append hi to new ones:

    for (i=original_number+1;i<=new_number;i++) {
    $("div.cool").eq(i).append('hi');
}

Upvotes: 0

Jasper
Jasper

Reputation: 76003

I haven't seen anyone use .filter() yet so I'll throw it out as a possibility. You can select all the elements and filter then down to only the ones you want:

$(".cool").filter(function () {

    //returns true if the end of the text string is not "[hi]" (which keeps it in the set of matched elements)
    return ($(this).text().slice(-4) != '[hi]')
}).append("[hi]");

The best solution is to alter the elements before adding them to the DOM like James Montagne did, I though I'd just demo this idea: http://jsfiddle.net/csDyM/9/

Upvotes: 0

Travis J
Travis J

Reputation: 82277

<script>
$(document).ready(function() {
 $("div.cool").append("[hi]");
});

function loadmore () {
 var count = 0;
 $.each("div.container",function(){count++});
 // this for loop represents the ajax dynamic content. it cannot be changed. 
 for (i=1;i<=4;i++) {
     $("div.container").append('<div class="cool">some text.</div>');
 }
 var current = -1;
 $.each("div.container",function(){
  current++;
  if(current < count)continue;
  this.append("[hi]");
 });
 }
</script>

Upvotes: 0

Ehtesham
Ehtesham

Reputation: 2985

$(document).ready(function() {
   addHi($("div.cool"));
});

function addHi(elem) {
   elem.append("[hi]");
}

function loadmore () {

    // this for loop represents the ajax dynamic content. it cannot be changed. 
    for (i=1;i<=4;i++) {
        var jqobj = $('<div class="cool">some text.</div>');
        addHi(jqobj);

        $("div.container").append(jqobj);
    } 

    // $("div.cool").append("[hi]"); adding this works but it appends existing elements
}

Upvotes: 0

James Montagne
James Montagne

Reputation: 78650

You could do this:

$('<div class="cool">some text.</div>')
    .append("[hi]")
    .appendTo("div.container");

Upvotes: 3

Joseph Marikle
Joseph Marikle

Reputation: 78520

You could add a trigger class and test against it:

http://jsfiddle.net/euBYj/

$(document).ready(function() {
    $("div.cool").append("[hi]").addClass("skip");
});


function loadmore () {

    for (i=1;i<=4;i++) {
        $("div.container").append('<div class="cool">some text.</div>');
    } 

    $("div.cool:not(.skip)").append("[hi]").addClass("skip");
}

Upvotes: 3

Matt Ball
Matt Ball

Reputation: 359796

Not very efficient, but it should work regardless:

function loadmore () {

    // grab existing elements from the DOM
    var $existing = $("div.cool");

    // this for loop represents the ajax dynamic content. it cannot be changed. 
    for (i=1;i<=4;i++) {
        $("div.container").append('<div class="cool">some text.</div>');
    } 

     $("div.cool").not($existing).append("[hi]"); 
}

Upvotes: 1

Related Questions