Dlaczego moja obsługa kliknięć jQuery wydaje się uruchamiana wiele razy w przypadku niektórych jej celów?

Question

ubiegać:

$(".newContentLink").click(function() { 
    $("#test").append("1"); 
}); 

Na tym:

<span id="contents"> 
<input class="newContentLink" type="submit" style="width: 100%;" value="CREATE A NEW CONTENT"/> 
<span id="content1" class="content study"> 
</span> 
<input class="newContentLink" type="submit" style="width: 100%;" value="CREATE A NEW CONTENT"/> 
<span id="content3" class="content study"> 
</span> 
<input class="newContentLink" type="submit" style="width: 100%;" value="CREATE A NEW CONTENT"/> 
<span id="content4" class="content category"> 
</span> 
<input class="newContentLink" type="submit" style="width: 100%;" value="CREATE A NEW CONTENT"/> 
</span> 

Dlaczego po kliknięciu na pierwszych 2 przyciski Dodaje 111, następny przycisk dodaje 11 a ostatni dodaje 1?

Answer 1

Nie można powtórzyć. Podejrzewam, że wprowadzasz w błąd sytuację, w której nadmiernie upraszczasz, głównie —. Mówiąc dokładniej, uważam, że dynamicznie dodajesz te dane wejściowe i wywołujesz $(".newContentLink").click(...) za każdym razem, gdy —, które, oczywiście, nadal stosuje dodatkowe kopie obsługi kliknięć do każdego .newContentLink na stronie.

Ostatnie utworzone dane wejściowe mają jedną kopię obsługi kliknięcia i dołączają jeden numer 1. Drugi najnowszy ma dwie kopie i dołącza 11. Trzeci ma trzy i dołącza 111 itp

Aby tego uniknąć, należy zastosować procedurę obsługi kliknij, aby nowo utworzonego elementu DOM, nie $(".newContentLink") (co zawsze oznacza każdy.newContentLink).

Answer 2

Spróbuj podać różne nazwy elementów wejściowych przesyłania.

Answer 3

nie błąd jQuery - Working Demo

Musi być problem z czegoś innego w kodzie. Gdzie jest element z id="test" w twoim znaczniku?

EDIT:

Wystarczy przeczytać chaos' answer, który brzmi jak spójnego wyjaśnienia.

przy okazji, identyfikatory element musi być unikalna w obrębie znaczników HTML - jest częścią specyfikacji HTML i może być kolejnym możliwym wytłumaczeniem

Answer 4

Jak chaos says, jesteś prawdopodobnie nazywając click() każdym razem, gdy dodasz i gromadzą się.

Jeśli dodajesz te elementy do dokumentu w sposób dynamiczny i musisz upewnić się, że ta funkcja jest dodawana do każdego dodawanego przez ciebie elementu, a co z używaniem live?

$('#contents').on('click', '.newContentLink', function() { 
    $("#test").append("1"); 
}); 

Spowoduje to, że reguła będzie stosowana dynamicznie jeden raz do dowolnej klasy kwalifikacyjnej w dokumencie.

Answer 5

Miałem podobny problem ... Wyliczyłem, że stosowałem funkcję zmiany w pętli ... tj. mój kod był wcześniej ....

$("table#UserIRTable > tbody > tr").each(function() 
{ 
    .............. 
    .............. 

    $("input[id='thisMonthSupply']").change(function(e){ 
     ...... 
    }); 
    .......... 
    .......... 
} 

objął funkcję zmiany na zewnątrz i bingo ... to działało .....

Answer 6

Aby upewnić się, że funkcja wykonać tylko raz na jednym kliknięciem imprezy ty może użyć $ (". newContentLink").jeden();

$(".newContentLink").one(function() { 
    $("#test").append("1"); 
}); 

Answer 7

lub można rozpiąć zdarzenia click każdym dodaniu nowego elementu

$('.newContentLink').unbind('click'); 

$(".newContentLink").click(function() { 
    $("#test").append("1"); 
});