Jquery mobile .click wypalanie wiele razy na nowej stronie wizyta

Question

Tak więc używam Jquery mobile z wielkim sukcesem, z wyjątkiem jednego problemu. Teraz za każdym razem, gdy użytkownik przegląda dynamiczną stronę z treścią, niezależnie od zawartości, zawsze jest przycisk u dołu, który po kliknięciu wysyła treść pod wskazany adres; działa świetnie. Po pierwszym załadowaniu strony kliknięcie powoduje jednorazowe uruchomienie zdarzenia. Podczas drugiej wizyty odpalono ją dwa razy, trzeci 3 razy itd. Dostajesz punkt. Przeszukałem sieć i zaimplementowałem każdą poprawkę, na jaką mogłem natknąć się, np. Używając "strony" zamiast "pageinit", wiążąc, rozłączając, usuwając div, wyłączając buforowanie w DOM, ale nic nie działa. Jedynym sukcesem, jaki udało mi się uzyskać, jest użycie kliknięcia .one(), ale po ponownym kliknięciu musi zostać uruchomiony. Oto struktura. Muszę .js pliki, które ładują się z tym każdy, aby rozpocząć

$("#page").live("pageinit", function() { 

Teraz miałem z funkcji e-mail i inne rzeczy w jednym pliku, ale to sprawia, że ​​łatwiej jest je rozdzielić i słyszałem to nie ma znaczenia. Teraz tutaj jest funkcja o nazwie e-mail w pageinit

$('.eb').live('click', function() { 
     var id = $('.eb').attr('id'); 
     var to = $('#recipient').val(); 
     var message = $('#email').html(); 

     var atpos = to.indexOf("@"); 
     var dotpos = to.lastIndexOf("."); 
     if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= to.length) { 
      alert('Please enter a valid email address!'); 
      return false; 
     } 

     if(to.length == 0) { 
      alert('Please enter a valid email address!'); 
      return false; 
     } 

     $.mobile.showPageLoadingMsg(); 

     $.post('./services/service.email.php', { id: id, to: to, message: message}, function(data) { 
      if(data.success == true) { 
       $.mobile.hidePageLoadingMsg(); 
       alert('Your recipe has been sent!'); 
       $('#recipient').val(''); 
       return true; 
      } 

      if(data.success == false) { 
       if(data.fail == 1) { 
        alert('An error has occured sending your recipe. Try again soon!'); 
        return false; 
       } 

       if(data.fail == 2) { 
        alert('Please enter a valid email address!'); 
       } 
      } 
     }, 'json'); 
      return false; 
    }); 

wszystko działa bez zarzutu z wyjątkiem bieżących wypalania .click na każdej nowej stronie. Czy ktoś może mnie poprowadzić we właściwym kierunku?

Answer 1

I rozwiązać ten problem poprzez realizację był z samego div, #page. Ta strona została załadowana dynamiczną zawartością, ale identyfikator nigdy nie był taki, więc gdzieś w kolejce był gdzieś zbuforowany i był uruchamiany przyrostowo przy każdej nowej wizycie. Właśnie dodałem kod PHP, aby utworzyć unikalny identyfikator div na każdym załadowaniu strony.

<?php $id = uniqid() ?> 
<div id="<?php echo $id; ?>">CONTENT</div> 

Rozwiązało to problem i uruchamia się tylko raz, niezależnie od tego, jak strony mogą się przeładować.

Answer 2

Od wersji jQuery 1.7 metoda .live() jest przestarzała. Użyj .on(), aby dołączyć programy do obsługi zdarzeń.

Jeśli używasz wersji 1.7+, spróbuj odłączyć zdarzenie kliknięcia najpierw za pomocą .off().

$('.eb').off('click').on('click', function() { 
// ... 
}); 

jeśli trzeba użyć .live() można rozpiąć zdarzenia z .die()

$('.eb').die('click').live('click', function() { 
// ... 
}); 

lub lepszego wykorzystania .delegate() i .undelegate() un elementu nadrzędnego:

$(document).undelegate('.eb', 'click').delegate('.eb', 'click', function() { 
// ... 
}); 

Answer 3

Wystarczy przesunąć imprezę click kod obsługi poza kodem obsługi zdarzenia pageinit w następujący sposób:

$(document).delegate("#page", "pageinit", function() { 


}); 
$(document).delegate('.eb', 'click', function() { 
     var id = $('.eb').attr('id'); 
     var to = $('#recipient').val(); 
     var message = $('#email').html(); 

     var atpos = to.indexOf("@"); 
     var dotpos = to.lastIndexOf("."); 
     if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= to.length) { 
      alert('Please enter a valid email address!'); 
      return false; 
     } 

     if(to.length == 0) { 
      alert('Please enter a valid email address!'); 
      return false; 
     } 

     $.mobile.showPageLoadingMsg(); 

     $.post('./services/service.email.php', { id: id, to: to, message: message}, function(data) { 
      if(data.success == true) { 
       $.mobile.hidePageLoadingMsg(); 
       alert('Your recipe has been sent!'); 
       $('#recipient').val(''); 
       return true; 
      } 

      if(data.success == false) { 
       if(data.fail == 1) { 
        alert('An error has occured sending your recipe. Try again soon!'); 
        return false; 
       } 

       if(data.fail == 2) { 
        alert('Please enter a valid email address!'); 
       } 
      } 
     }, 'json'); 
      return false; 
    }); 

Podczas korzystania delegacji zdarzeń nie chcą wiązać się wewnątrz innej obsługi zdarzeń, ponieważ za każdym razem, obsługi zdarzeń pożary będziesz ponownego wiązania (i kiedy przekazać obsługi zdarzeń są delegowane do życia DOM).

Można również użyć .bind() zamiast .live() (to moja preferowana metoda):

$(document).delegate("#page", "pageinit", function() { 
    $('.eb').bind('click', ...); 
}); 

Można zauważyć, że obie moje przykłady zmienić out .live() dla .delegate() jak to działa nieco szybciej, nawet gdy delegowanie od element document. .delegate() s prawdziwą siłą jest to, że można wybrać element główny zamiast wiązać się z elementu document: http://api.jquery.com/delegate

Answer 4

Jeśli podejrzewasz, że formularz (na przykład wyskakujący formularz) tworzy wiele stron po przesłaniu, spróbuj dodać dane-ajax = "false" do elementu formularza każdego formularza. To rozwiązało mój problem.