Please can someone tell me why pageinit works twice? I had a problem when my list items were duplicated, and having put a warning window, I found out that this is due to the fact that pageinit works twice. However, I do not understand why ...
Here is my JS code:
$(document).on('pageinit', '#searchPage', function(){ alert("This alert box runs twice!"); $.ajax({ dataType: "json", url: '../JS/food.json', success: function(result){ var output = ''; $.each(result, function(i, food){ output += '<li><a href="#" id="' + i + '" class="food_info"><h2>' + food.name + '</h2><p>' + food.calories + ' Calories per 100g</p></a></li>'; }); $('#searchFood').html(output).promise().done(function(){ $(this).on("click", ".food_info", function (e) { e.preventDefault(); $("#foodInfo").data("result", result[this.id]); $.mobile.changePage("#foodInfo", {transition : "slide", reverse : false}); }); $('#searchFood').prepend('<li data-role="list-divider" data-theme="c" role="heading">Food and Meals:</li>'); $(this).listview("refresh"); }); }, error: function(jqXHR, textStatus, errorThrown){ alert(errorThrown); } }); });
After some research, I think this may be due to $.mobile.changePage , but cannot find an alternative. Any help could be helpful! Thanks in advance!
source share