jQuery Functions not Working After Using .load() to Refresh div Content

Question

I'm reloading the contents of "#some-div" using ".load()" after processing some form data. This works just fine and "#some-div" is refreshed with the expected updated content. The problem is that none of my other assigned jQuery functions (e.g. ".some-trigger" below) will work for elements within "#some-div" after it has been refreshed. Any insight is much appreciated. Here's a simplified representation of my code.

<div id="some-div">
    <a class="some-trigger" href="#">I Won't Work Anymore After I've Been Refreshed</a>
</div>

<script> 
    $('.ajax-form').ajaxForm(function() {  
        $("#some-div").load(location.href+" #some-div>*","");
    });

    $('.some-trigger').someFunction();
</script>

Ram · Accepted Answer · 2012-07-21 05:05:04Z

1

you should delegate the click event for dynamically loaded elements, try the following:

$("#some-div").on('click', '.some-trigger', function() {
   // do something here
})

edited Jul 21, 2012 at 5:05

answered Jul 21, 2012 at 4:58

Ram

145k16 gold badges174 silver badges201 bronze badges

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

Collectives™ on Stack Overflow

jQuery Functions not Working After Using .load() to Refresh div Content

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related