Poor click () in jQuery

Question

Displays the following in #test:

<a class="page" href="/test.php?page=1">1</a> <a class="page" href="/test.php?page=2">2</a>

 $.get('test.php', function(data) { $('#test').html('<div class="content">'+data+'</div>'); // реалиовываем переход по страницам $('.content .page').click(function() { var href = $(this).attr('href'); $.get(href, function(data) { $('.content').html(data); }); }); });

From the first click everything happens fine, but if you click on .page second time, then it just seems like nothing works.

Accepted Answer · 2013-08-02T12:10:42

Judging by the fact that the block with the navigation through the pages is in the .content block, you replace the elements on which the handler stands with other elements that are already without a handler.

 $('.content').html(data);

I think the problem will be solved if you move the navigation through the pages outside the .content block

Update:

You can still try:

 $.get('test.php', function(data) { $('#test').html('<div class="content">'+data+'</div>'); bindPageClick(); }); function bindPageClick() { // реалиовываем переход по страницам $('.content .page').click(function() { var href = $(this).attr('href'); $.get(href, function(data) { $('.content').empty().html(data); bindPageClick() }); }); }

Answer 2 · 2013-08-02T12:13:01

Use delegation :

 $('.content').on('click', '.page', function() { // ... });

PS For jQuery> 1.4, but <1.8

 $('.content').delegate('.page', 'click', function() { // ... });

@RubaXa, Uncaught TypeError: Object # <Object> has no method 'on' :(

Poor click () in jQuery

2 answers 2

More articles: