Question

hi i’m trying to dynamically append some divs and then use jquery on them such as the click event, but it does not work, i have no idea why it’s acting this way..

$("#addGenreFinal").click(function () {
     var genre = $('#newGenreTxt').val();
     $("#txtAddGenreContainer").slideUp();
     $('#otherFavContainer').append('<div class="songTilesGenreContainer"><div class="addSongsBtnContainer icons" ><img src="../../Content/images/add.png"             style="padding:10px;"/></div><div style="float:right;padding-right:26px;padding-    bottom:20px;margin-top:20px;color:#949494;font-size:20px;">' + genre + '</div></div>');
     $('#newGenreTxt').val('');
    });

    $(".songTilesGenreContainer").click(function () {
        alert('hello'); 
    });

why the alert box is not popping out, when i use other pre defined classes it works but it doesnt on dinamically appened elements hmm…

Answer 1

You should bind the event using live as the element is added later to the document

$(".songTilesGenreContainer").live("click", function () {
    alert('hello'); 
});