jQuery Ajax: request content by using $.get

Question

in order to avoid that the webpage is fully reloaded whenever an internal link is clicked, I'm using jQuery and AJAX.

$(".ajax").click(function(e){
    e.preventDefault(); // do not follow link
    var requestPage = "content.php?" + jQuery(this).attr('href').split("?")[1];
    $.get(requestPage, function(data){
        $("#content").html(data);
    });
});

Some of these links are generated by the content.php, looking like

<li><a class="ajax" href="home.php?x=1&y=A" title="Link A">Link A</a></li>
<li><a class="ajax" href="home.php?x=1&y=B" title="Link B">Link B</a></li>
<li><a class="ajax" href="home.php?x=1&y=C" title="Link B">Link C</a></li>

Now my proplem is, the first time after refreshing the page (by using F5) it works fine, the second time the click function is not invoked at all.

Some similar links in the home.php (so they are not regenerated) use this click function as well, no issue with them.

Can anyone help please?

data contains the content which is to be shown on the page, so it will be something like "
Link A

Link B

Link C
... — Explicat, Jul 07 '13 at 13:10
You might save a step by taking a look at jQuery .load http://api.jquery.com/load/ — Paul, Jul 07 '13 at 13:16

Gökhan Girgin · Accepted Answer · 2013-07-07T13:48:49.780

1

You can't attach an event such as click() to the dom that loading dynamically. So, It should be on() event delegation. In older versions of jQuery you can use live() or delegate() instead of on().

$(document).on("click",".ajax",function(e){
      e.preventDefault(); // do not follow link
    var requestPage = "content.php?" + jQuery(this).attr('href').split("?")[1];
    $.get(requestPage, function(data){
        $("#content").html(data);
    });
});

edited Jul 07 '13 at 13:48

answered Jul 07 '13 at 13:05

Gökhan Girgin

1,164
8
12

Could you add an explanation why? Posting code without an explanation is not particular helpful. – Felix Kling Jul 07 '13 at 13:11

jQuery Ajax: request content by using $.get

1 Answers1