CODEWITHSUNDEEP
javascriptjqueryajax
andy007
andy007

Reputation: 917

JavaScript runs only once after page loading

This script is triggered only once when the page loads. The page has loaded, click the link, the data came from. Click the link again, nothing. Overload the page, the link works, etc. What is wrong in the script, why it triggered only once?

<script>
    $(function() {
        $('a').click(function() {
            $.get('ajax', function(data) {
                $('#mydiv').html(data);
            });
        });
    });
</script>

<div id="mydiv">
    <a href="#">Update the div!</a>     
</div>

Compared the data in the "mydiv" before and after clicking the link: before clicking the link

<div id="mydiv">
    <a href="#">
        Update the div!
    </a>
</div>

after link was cliked

<div id="mydiv">
    <a href="#">
            Update the div!
            <!--Here is the data that came from.-->
    </a>
</div>

Upvotes: 1

Views: 758

Answers (2)

Regent
Regent

Reputation: 5178

Because of dynamically created a you should use:

$(document).on("click", "a", function() {

Upvotes: 1

adam0101
adam0101

Reputation: 30995

Because you're overwriting the a tag that you attached the click event to, you'd need to rerun the code that attaches the click event again. Or you could use event delegation like blex suggests: 

$(document).on("click", "a", function(){

}

Upvotes: 3

Related Questions