Как предотвратить функцию, связанную с событием клика при каждом повторе страницы?

Question

я использую следующий

jquery 1.11.1 
    jquery.mobile 1.4.3 
    cordova 2.9.0 
    iscroll 5 

вот мой HTML:

<div data-role="page" id="listpageid"> 

<div data-role="header" data-position="fixed"> 
     some radio buttons 
</div> 

    <div id="wrapper"> 
     <div data-role="content" id="scroller"> 
     </div> 
    </div> 

</div> 

у меня есть вызов Ajax, которая получает кучу данных с сервера. я петля через результаты и добавить их в DIV с идентификатором = «скроллер»

$('#scroller').empty(); 

for (var i=0;i<resultsArr.length;i++) 
{ 

    htmlToAppend = ""; 

    htmlToAppend = "<a id=" + i + " >" + resultsArr[i].field + "<br><br></a>"; 

    contentForDisplay = contentForDisplay.concat(htmlToAppend); 

} 

$('#scroller').append(contentForDisplay); 

$('#scroller a').click(function() { 
     alert("you clicked on " + this.id); 
}); 

этот код выполняется всякий раз, когда Ajax вызов заполняет resultsArr

первый раз на странице отображается, и это выполняется это дает меня точно, что я хочу, прокручиваемый список кликаемых ссылок.

Если я оставлю страницу и вернусь назад, все будет работать неправильно.

ДИВ имени скроллер опорожняется и отображается содержимое resultsArr, но нажав на ссылку каждые результаты в 2 предупреждений вместо 1.

если я покинуть страницу и вернуться обратно в 3-й раз, нажав на ссылку дает 3 предупреждения вместо 1.

я попытался предотвращения этого кода

$('#scroller a').click(function() { 
     alert("you clicked on " + this.id); 
}); 

от исполнения на всех, кроме первого отображения страницы, и это делает отображаемые ссылки unclickable на 2-й, 3-й и т.д. страница отображается.

я думал

$('#scroller').empty(); 

удалены/уничтожены содержимое страницы и будет включать в себя функцию, которая увольняют на событие щелчка.

очевидно его нет.

как разрешить перерисовку страницы, но только один раз присоединить функцию к событию клика?

EDIT: ни одно из ваших решений не работало. пока я не удалю iscroll. затем все ваши решения работали. так что ... есть ли у кого-нибудь какие-либо идеи о том, как iscroll накручивает это?

Answer 1

Использование делегированных событий.

http://learn.jquery.com/events/event-delegation/

$(document).on("click", "#scroller a", function(e){ alert("You clicked " + this.id); }); 

Edit: Другой способ заключается в попытке Несвязанность события, прежде чем подменой их.

$('#scroller a').off("click.myEvent"); 
$('#scroller a').on("click.myEvent", function() { 
    alert("you clicked on " + this.id); 
}); 

Answer 2

Поместите делегированный обработчик щелчка в обработчик событий pagecreate jQM для страницы #listpageid:

$(document).on("pagecreate", "#listpageid", function(){ 
    $("#scroller").on("click", "a", function(e){ 
     alert("You clicked " + this.id); 
     return false; 
    }); 
}); 

Тогда оставьте свой код AJAX, где (в моем демо-то в pagebeforeshowhandler, который работает каждый раз, когда вы переходите к странице.

Вот рабочая DEMO

Каждый раз, когда вы переходите и со страницы, другое количество полей добавляется в скроллера DIV; однако активен только один обработчик кликов.