優化一些代碼，其目的是爲了更好的UI

Question

你會如何改寫？它的工作原理，但它一起被扔在一起。目的：如果您在包含複選框的td元素內單擊任意位置，則選中該複選框。

$('td input').filter(':checkbox').each(function() { 
    $(this).closest('td').addClass('CursorPointer'); 
}); 
$('td.CursorPointer').click(function() { 
    $('input:checkbox',this).click(); 
}); 
$('input:checkbox').click(function(myEvent) { 
    myEvent.stopPropagation(); 
}); 

不知這是添加一個事件監聽器，或使用委託方法的一個很好的例子。

Answer 1

$('td').has(':checkbox').addClass('CursorPointer').click(function(e) { 
    $('input:checkbox',this).click(); 
}).find(':checkbox').click(function(e){ 
    e.stopPropagation(); 
}); 

這裏有一個的jsfiddle：http://jsfiddle.net/gislikonrad/5G7ee/

Answer 2

第一：

$('td input').filter(':checkbox').each(function() { 
    $(this).closest('td').addClass('CursorPointer'); 
}); 

是一樣的：

$('td').has(':checkbox').addClass('CursorPointer'); 

其次類似sdleihssirhc，但針對一個特定的元素（最好不要用太多的冒泡超載文件事件）。

$('#my-table-id').delegate('.CursorPointer', 'click', function() { 
    $(':checkbox', this).click(); 
}).delegate('input:checkbox', 'click', function (e) { 
    e.stopPropagation(); 
}); 

Answer 3

jQuery中的.click方法附加一個點擊事件監聽器匹配的組中的每一個元素，所以是的，它很可能是，如果一個小更高效你改變了這兩個使用事件委派：

$(document).delegate('td.CursorPointer', 'click', function() { 
    $('input:checkbox', this).click(); 
}).delegate('input:checkbox', 'click', function (myEvent) { 
    myEvent.stopPropagation(); 
}); 

可能是一個非常有效的方式來短語th在jQuery中，但這是必不可少的想法。