CODEWITHSUNDEEP
jquery
Paparappa
Paparappa

Reputation: 2189

jquery keypress not working after load?

I'm trying to make a navigation using the keyboard. I load new content with jquerys load() function but it only works the first time the script is loaded, I've heard that you're supposed to use jquery live() function to get it to load every page but it doesn't. This is the keypress function:

$(document).live("keydown", function(e){
        if (e.keyCode == 49) {
            $('.next').click();
        }
        if (e.keyCode == 50) {
            $('.prev').click();
        }
    });

This code is in every page that gets loaded. But only works the first time you use the page, after one click, it doesn't work. Why? What .next and .prev do:

$('.next').click(function(event) {
        event.preventDefault();
        var href = this.href;
        $('.loading').fadeIn();
        $('#content').load(href, function(){ 
            $('.loading').fadeOut();
        });
    });

It does however work to press .next and .prev after load with your mouse all the time. Just the keypress that only works once.

This is the HTML structure:

<div id="content">
 Image
 <div class="nav">
  <a href="page.php?id=1" class="prev">Prev</a>
  <a href="page.php?id=2" class="next">Next</a>
 </div>
</div>

Upvotes: 0

Views: 1805

Answers (2)

Wolf
Wolf

Reputation: 2150

Seems like this will work for you.

$('.next').click(function (event) {
  event.preventDefault();
  var href = this.href;
  $('.loading').fadeIn();
  $('.main-bg').load(href, function () {
    $('.loading').fadeOut();
  });
});

Since you need those two buttons always, you don't need to load them dynamically. Also the the number of events will increase with each click. So replace only the content inside main-bg div.

Update:

Also, I have noticed that you are re-loading the javascript whenever you change the image. That will create issues. So add script to the first page only.

If you want the script to be loaded each time, then use the following code

$(document).keydown( function(e){
        if (e.keyCode == 49) {
            $('.next').click();
        }
        if (e.keyCode == 50) {
            $('.prev').click();
        }
    });

$('.next').click(function(event) {
        event.preventDefault();
        var href = this.href;
        $('.loading').fadeIn();
        $('#content').load(href, function(){ 
            $('.loading').fadeOut();
        });
    });

Upvotes: 2

Louis XIV
Louis XIV

Reputation: 2224

$(document).on("keydown", function(e){
    if (e.keyCode == 49) {
        $('.next').trigger("click");
    }
    if (e.keyCode == 50) {
        $('.prev').trigger("click");
    }
});

$(document).on('click', '.next', function() {
    var href = $(this).attr("href");
    $('.loading').fadeIn();
    $('#content').load(href, function(){ 
        $('.loading').fadeOut();
    });
    return false;
});

Please do check, #content is unique after loading the content... I changed some of your code but it's not necessary I think.

Upvotes: 1

Related Questions