Question

I am creating some elements and appending it, and its working fine but when I want to call any function or want to call any jquery that not work, but when i put that elements directly instead of appending then it works properly. In all to say that appending element does not call any function or anything.

JQUERY CODE:

var cart_content = jQuery($.create('li', {}, [])).append($.create('span',{}, [av_title]),$.create('img', {"src":"images/delete_icon.png", "class":"cart_content", "alt":"delete", "title":"Delete"}, []));
$(".advertise_cart").append(cart_content);


$(".cart_content").click(function(){    alert("Hello"); });

<ul class="advertise_cart" id="advertise_cart_id">
   <li>
        <span>Inner Content 1</span>
        <img src="images/delete_icon.png" class="cart_content" alt="delete" title="Delete">    <!------ On clicking on this will show alert box, but on clicking on appended element will not call alert box or anything ----->
    </li>
</ul>

Thanks in advance

Answer 1

The problem you’re experiencing is the result of the elements not being present in the DOM when the events are bound. To work around this, you can use delegate() or live():

$('body').delegate('.cart_content','click',
    function(){
        alert('hello');
    });

JS Fiddle demo.

References:

• live().
• delegate().