1

親div内にいくつかの要素checkbox、img、および別のdivがあります。親divをクリックすると、3つの要素すべてが背景色で選択されます。これはhtmlがどのように見えるかです：

<div class="jfmfs-friend" id="812290706"><input class="friend-checkbox" type="checkbox"><img src="//graph.facebook.com/picture"><div class="friend-name">Test user</div></div>

親のdiv選択内でチェックボックスをオンまたはオフにします

elem.delegate(".jfmfs-friend", 'click', function(event) {
$(this).find('input').attr('checked', !$(this).find('input').attr('checked'));
});

すべてが正常に機能します。ただし、問題は、チェックボックスのみをクリックすると、上記の機能が実行され、チェックボックスのチェックが外れることです。チェックボックスはオフになっていますが、親div全体が選択されています。

チェックボックスがクリックされた場合、この行を実行しないようにするにはどうすればよいですか？

 $(this).find('input').attr('checked', !$(this).find('input').attr('checked'));
4

1 に答える 1

2

イベントターゲットのタイプまたはタグ名をチェックして、チェックボックスまたは別の要素がクリックされたかどうかを確認します。

elem.on('click', '.jfmfs-friend', function(e) {
    if (e.target.tagName.toLowerCase() != 'input')
        $(this).find('input') 
               .prop('checked', !$(this).find('input').prop('checked'));
});
于 2013-01-27T16:48:08.577 に答える