Question

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);
    }
});

Answer 1

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");
}