CODEWITHSUNDEEP
jquery
Guernica
Guernica

Reputation: 246

jquery mobile - calls firing twice when nav to another page and back

I am pretty new to jqm i have tried about 20 different things and have been at this a few hours, the best I can get to work is the following code.

$(function() {
$('.load_more').live("click",function() {
//my ajax call here

success: function(htmldat){
    $("#more").remove();
       $("#updates").append(htmldat).listview('refresh');
       $("#more").trigger('create');

}
});
}
return false;
});
});

What my page does is load 10 records from a database into a list view, I have a button(.load_more) that appends the next ten records to the listview. As soon as I navigate away from the page and come back and click the button it fires twice. I have went through so many suggestions and can't get one to work, any help would be greatly appreciated.

Also that code I am loading before the closing body tag on the page I am using it.

EDIT

The following code appears to work although when i replace the alert with my function it wont work, no event is triggered. 

$(document).delegate("#clickers", "pageinit", function () {
  $(".load_more").off('click').on('click', function () {
    alert("hello");
  });
});

When the button is clicked it fetches data and appends it to the listview, when i recreate the button could that be killing the event ?

$("#more").remove();
$("#updates").append(htmldat).listview('refresh');
$("#more").trigger('create');

Upvotes: 1

Views: 1105

Answers (1)

Sam Grondahl
Sam Grondahl

Reputation: 2467

Upon reading your edit, it's clear that the issue is definitely with recreating the button. Event handlers get bound to DOM elements that exist when the handlers are created; they don't blanket apply to all later elements with the same id. An easy solution would be to bind the handlers on each create:

var recreateButton = function() { 
    $("#more").remove();
    $("#updates").append(htmldat).listview('refresh');
    $("#more").trigger('create');
    $("#more").off('click').on('click', function(){});
}

Alternatively, you could just use the onClick event on the button element to call a function each time it is clicked.

Upvotes: 2

Related Questions