1

私が取り組んでいる Web ページは、candidate-tile次のような のリストです (これは実際にはmustacheテンプレートです:

<div class="candidate-tile">
    <div class="candidate-image">
        <img src="<%= candidate.image %>" width="50px" height=auto />
    </div>
    <div class="details">
        <h3 class="candidate-name"><%= candidate.name %></h3>
        <h6 class="candidate-dept"><%= candidate.dept %></h6>
        <span class="label label-info"><%= candidate.hostel %></span>
    </div>
    <div class="checkbox">
        <span class="check">&#10003;</span>
    </div>
</div>

チェックボックスがクリックされたときにクラスを切り替えたいと思います。このようなもの:

$('.checkbox').click(function(){
    $(this).parent().toggleClass("candidate_selected");
});

しかし、これは機能していないようです。でキャプチャしcheckboxて、クリック イベントを処理できることを確認するにはどうすればよいですか?

アップデート

mustacheテンプレートのクリック イベントに問題があることをテストしました。sammy.jsテンプレートをロードするために使用しています。ページの残りの部分 (これは固定されており、mustache / sammy を使用してレンダリングされていません) で、クリック イベントは正常に機能しています。しかし、何らかの理由で、mustache / sammy によってレンダリングされた部分でクリック イベントが機能しません。何が起こっているのか誰にも分かりませんか?状況をよりよく説明するために私にできることはありますか?サミーはイベントをリッスンしていて、jquery に処理させていませんか?

別の更新

私が理解できる限り、問題は、ハンドラーcandidate-tileを含む js ファイルがロードされたときに s がロードされないことです。clickアイテムは後でロードされますが、その時までに、すべてのイベント登録が既に行われているため、生成された新しい DOM 要素にバインドされたイベントはありません。私はそう考えるのが正しいですか?はいの場合、抜け道は何ですか?

どうもありがとう!

4

1 に答える 1

1

あなたのコードは正常に動作するはずです。with class でクラスcandidate_selectedを切り替えます。クロージャにa を入れてみて、クリックが発生することを確認してください。divcandidate-tileconsole.log

AJAX を使用してタイルを動的に作成する場合は、次のようにする必要があります。

$('#container').on('click', '.checkbox', function(){....

containerdivより上のレベルになりますcandidate-tile divs

于 2012-07-25T08:00:17.303 に答える