Tại sao trình xử lý nhấp chuột jQuery của tôi xuất hiện để chạy nhiều lần cho một số mục tiêu của nó?

Question

tôi áp dụng:

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

On này:

<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> 

Tại sao khi tôi bấm vào 2 nút đầu tiên nó sẽ thêm 111, vào nút bên cạnh thêm 11, và người cuối cùng thêm 1?

Answer 1

Không thể sao chép. Tôi nghi ngờ rằng bạn đang trình bày sai số — đơn giản hóa, chủ yếu là — tình huống của bạn. Để chính xác, tôi tin rằng bạn đang tự động thêm các yếu tố đó và gọi số $(".newContentLink").click(...) mỗi lần —, một cách tự nhiên, tiếp tục áp dụng các bản sao bổ sung của trình xử lý nhấp chuột cho mỗi .newContentLink trong trang.

Vì vậy, dữ liệu nhập gần đây nhất bạn đã tạo có một bản sao của trình xử lý nhấp chuột và nối thêm một 1. Lần thứ hai gần đây nhất có hai bản sao và nối thêm 11. Thứ ba có ba và gắn thêm 111 vv

Để ngăn chặn điều này, áp dụng các handler nhấp chuột để tử DOM mới được tạo ra, chứ không phải $(".newContentLink") (mà luôn luôn có nghĩa là mỗi.newContentLink).

Answer 2

Thử đặt các tên khác nhau cho các yếu tố đầu vào gửi của bạn.

Answer 3

Không phải là một lỗi jQuery - Working Demo

Có phải là một vấn đề với cái gì khác trong mã của bạn. Yếu tố ở đâu với id="test" trong đánh dấu của bạn?

EDIT:

Chỉ cần đọc chaos' answer, mà âm thanh như một lời giải thích chính đáng.

Bằng cách này, id phần tử phải là duy nhất trong HTML markup - đây là một phần của đặc tả HTML và có thể là một lời giải thích có thể

Answer 4

Như chaos says, có lẽ bạn đang gọi click() mỗi khi bạn thêm một, và họ đang tích lũy.

Nếu bạn đang thêm các mục này vào tài liệu động và cần đảm bảo rằng chức năng này được thêm vào mỗi mục bạn thêm, cách sử dụng trực tiếp?

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

Điều này sẽ đảm bảo quy tắc được áp dụng động một lần cho bất kỳ lớp đủ điều kiện nào trong tài liệu.

Answer 5

Tôi đã có một vấn đề tương tự .... Đã tìm ra rằng tôi đã áp dụng chức năng thay đổi trong một vòng lặp ... tức là. mã trước của tôi là ....

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

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

mất chức năng thay đổi ra và bingo ... nó làm việc .....

Answer 6

Để đảm bảo chức năng chỉ thực hiện một lần vào một cú nhấp chuột kiện bạn có thể sử dụng $ (". newContentLink").một();

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

Answer 7

hoặc bạn có thể unbind sự kiện nhấp chuột mỗi khi bạn thêm một yếu tố mới

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

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