jQuery .load() function only gets called once

Question

##### SOLVED ##### I had a javaScript refresh setInterval("...", 1000); in the source code which caused the error. Thanks a lot for your help!

the html

<div class="stackwrapper" id="user1"></div>
<div class="stackwrapper" id="user2"></div>
<div class="userdrawings"></div>

the javascript

$('.stackwrapper').click(function(e){
var id=$(this).attr('id');
$('.userdrawings').load('loadSession.php?user='+id).fadeIn("slow");
});

Somehow it only works at once, only at the first click on stackwrapper, when I click on the second one, the function is not triggered again.

It looks like there is something else firing an error. Does the response contain JavaScript code that fails (load() executes containing JavaScript by default)? — acme
– acme, Commented Mar 23, 2012 at 11:39
If you have found your own solution, you should post it as an answer, then accept it, so that others may more easily find it. — Gaffi
– Gaffi, Commented Aug 14, 2012 at 20:51

m90 · Accepted Answer · 2012-03-23 18:08:48Z

1

Okay now i get it, it's because you're making ajax call. Here's a link that answers your question.

edited Mar 23, 2012 at 18:08

m90

11.8k16 gold badges69 silver badges120 bronze badges

answered Mar 23, 2012 at 11:27

Sevag Akelian

2311 gold badge2 silver badges7 bronze badges

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

3 Comments

m90 Over a year ago

But this is not talking about what is happening here as the bound elements are not changing:

When you call $('a'), it returns all the links on the page at the time it was called, and .click(fn) adds your handler to only those elements. When new links are added, they are not affected. See the AJAX and Events Tutorial for a longer discussion.

Sevag Akelian Over a year ago

There are only 2 "stackwrapper" classes? i have a solution. after .load you call a function. function2() .. and you create the function you put the same code in it. $('.stackwrapper').click(function(e){ var id=$(this).attr('id'); $('.userdrawings').load('loadSession.php?user='+id).fadeIn("slow"); });

m90 Over a year ago

What the FAQ is talking about is that when you load content via AJAX the newly created elements will not be automatically bound to event handlers that are declared on $(document).ready() - This is not what seems to go wrong here

Sevag Akelian · Accepted Answer · 2012-03-23 11:12:14Z

0

try to put it inside a

$(document).ready(function(){
//place the above code here.
});

answered Mar 23, 2012 at 11:12

Sevag Akelian

2311 gold badge2 silver badges7 bronze badges

Comments

VolkerK · Accepted Answer · 2012-03-23 11:20:28Z

0

Can't reproduce the problem with this self-contained example

<?php
if ( isset($_GET['user']) ) {
    echo '<span>user=', htmlspecialchars($_GET['user']), '</span>';
    die;
}
?>
<html>
    <head>
        <title>...</title>
        <style type="text/css">
            .stackwrapper { width:100px; height: 100px; margin: 5px;  background-color: red }
        </style>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('.stackwrapper').click(function(e) {
                    var id=$(this).attr('id');
                    $('.userdrawings').load('?user='+id).fadeIn("slow");
                });
            });
        </script>
    </head>
    <body>
        <div class="stackwrapper" id="user1"></div>
        <div class="stackwrapper" id="user2"></div>
        <div class="userdrawings"></div>
    </body>
</html>

You might want to use a javascript debugger, like e.g. included in firebug and check for errors.

answered Mar 23, 2012 at 11:20

VolkerK

96.3k20 gold badges169 silver badges232 bronze badges

1 Comment

John Mayer Over a year ago

Thanks a lot, found the mistake!

Mark Schultheiss · Accepted Answer · 2012-03-23 11:35:42Z

0

You could try putting it at the document level:

$(document).on('click', '.stackwrapper', function(e) {
    var id = $(this).attr('id');
    $('.userdrawings').load('loadSession.php?user=' + id).fadeIn("slow");
});

answered Mar 23, 2012 at 11:35

Mark Schultheiss

34.3k13 gold badges75 silver badges117 bronze badges

Comments

xuqin1019 · Accepted Answer · 2012-03-23 11:48:16Z

0

It's strange , while It works well on my computer . It changes every time when I click. this is my code

html

<div class="stackwapper" id="user1">user1</div>
<div class="stackwapper" id="user2">user2</div>
<div class="userdrawings"></div>

js

$(document).ready(function(){
$(".stackwapper").click(function(e) {
       var id = $(this).attr('id');
       $(".userdrawings").load("user_session.php?user="+id).fadeIn("slow");
    });
});

user_session.php

$user=$_GET["user"];
echo "hello " . $user;

answered Mar 23, 2012 at 11:48

xuqin1019

2024 silver badges13 bronze badges

Collectives™ on Stack Overflow

jQuery .load() function only gets called once

5 Answers 5

3 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related