1

このフィドルを見てください：http://jsfiddle.net/mrmartineau/53fkV/embedded/result/

意図した結果は、.poll_option tdをクリックすると背景色がピンクに変わり、チェックボックスがオンになります。各オプションにはさまざまなバグがあります。これらは次のとおりです。

オプション 1: 私が抱えている問題は、オプション 1 では、チェックボックス自体をクリックするとチェックされず、他のすべてが正常に動作することです。つまり、ラベルをクリックすると<td>結果が正しいということです。イベントが正しくバブリングされていないようです..

オプション 2: この場合、別の解決策 (.toggle() メソッドを削除) を試し、実際にクリックされている要素 ( console.log(e.target.nodeName);) を把握しようとしましたが、チェックボックスはクリックできますが、ラベルはクリックできず、ラベルはクリックできません。イベントを機能させます。

私のコードを見て、どこが間違っているかを確認してください。これほど難しいことはないと確信しています...

乾杯

4

1 に答える 1

1

提案されたより簡単な解決策：

$('.poll_option.one td').click(function (e) {
    $(this).toggleClass('highlight');
    $(this).find('input').prop("checked", $(this).hasClass("highlight"));
    console.log(e.target.nodeName);

// weird that clicking the label does not naturally propagate
// the click event to the parent
}).find("label").click(function () {
    $(this).closest("td").click();                
});

<a href="http://jsfiddle.net/53fkV/12/" rel="nofollow">デモ。

于 2012-04-13T14:50:51.023 に答える