jQuery, nhấp vào sự kiện, quá nhiều đệ quy

Question

thể ai đó cho tôi biết tại sao mã này:

$('#places-view > tbody').find('td').click(function(evt) { 
    var td = $(this), 
     input = td.find('input'); 
     console.log('click'); 
     console.log(input.attr('disabled'), 'disabled'); 
     if (! input.attr('disabled')) { 
      input.trigger('click'); 
      console.log('inner click'); 
     } 
}) 

ném quá nhiều lỗi đệ quy ...

Trân

Answer 1

Khi bạn kích hoạt các "click" , nó không thực sự là một vòng gửi sự kiện riêng biệt — jQuery sẽ chạy các trình xử lý ngay tại đó và sau đó. Vì số <input> của bạn là bên trong<td> của bạn, sự kiện sẽ tự bong bóng ra chính nó là <td>, nơi nó sẽ chạy lại vào trình xử lý đó.

Cũng lưu ý rằng dòng này ở đây:

console.log(input.attr('disabled'), 'disabled'); 

là có lẽ không phải những gì bạn muốn - Tôi nghĩ rằng tôi sẽ luôn luôn đăng nhập từ "tàn tật". Có lẽ bạn có nghĩa là

console.log(input.attr('disabled') + ' disabled'); 

Answer 2

Để ngăn chặn sự kiện bọt, đặt event.stopPropagation() trong handler cho sự kiện click input yếu tố của bạn.

$('#places-view input').click(function(event) { 

     // This will prevent the click event from bubbling up and firing 
     // the click event on your <td> 
    event.stopPropagation(); 

     // run the rest of your click code 
}); 

http://api.jquery.com/event.stopPropagation/

---

EDIT: Như @Pointy ghi chú khác, nó có thể là mục đích của bạn để có xử lý tương tự xử lý cả hai sự kiện, hoặc ít nhất là có xử lý td vẫn bắn khi bạn bấm vào số input.

Nếu đó là trường hợp, bạn sẽ chỉ cần phải kiểm tra để xem nếu xử lý td đã bị sa thải bởi một nhấp chuột vào input, và nếu như vậy, ngăn chặn sự input.trigger("click") từ chạy:

$('#places-view > tbody').find('td').click(function(evt) { 
    var td = $(this), 
     input = td.find('input'); 
     console.log('click'); 
     console.log(input.attr('disabled'), 'disabled'); 
     if (! input.attr('disabled')) { 
       // If the target of the click was not the input, 
       // then trigger the click on the input 
      if(input.not(evt.target).length) { 
       input.trigger('click'); 
       console.log('inner click'); 
      } 
     } 
}); 

Một cách khác để thực hiện thử nghiệm sẽ là:

if(input[0] != evt.target) {... 

Cả hai cách tiếp cận này giả định rằng chỉ có một input. Nếu đó không phải là trường hợp, thì bạn sẽ cần phải cung cấp cho đầu vào một định danh để cho phép thử nghiệm cụ thể hơn.