0

次のような形式のチェックボックスがあります。

<label for="option1">
    <input type="checkbox" id="option1"> Foo
</label>

チェックボックスはjQueryモーダルに表示されます。モーダルのコンテンツがモーダルがアクティブ化されたのと同じページからプルされた場合、<label>期待どおりにチェックボックスをオンにします。

ただし、モーダルのまったく同じコンテンツが外部ファイルからAjaxを介してプルされる場合、[<label>いいえ]をクリックするとチェックボックスがオフになります。チェックボックスを直接クリックしてチェックする必要があります。

<label>コンテンツがAjax経由でプルされている場合、クリック動作が変わるのはなぜですか？

（必要に応じて、外部ファイルをプルするために使用しているJSを提供できますが、これはおそらくより広範な問題/解決策になる可能性があると考えました。）

4

2 に答える 2

0

要素が後でDOMに表示されるため、ライブイベントが必要です。

$(document).on('click', 'input[type=checkbox][id^=option]', function() {
  alert('clicked');
});
于 2012-05-17T18:10:11.663 に答える
0

このようなイベントハンドラーを提供しても同じ問題を完全に解決できなかったため、問題は単にライブイベントハンドラーが必要になるよりも深刻だと思います。jQueryダイアログは、最終的にHTMLのクローンを作成してダイアログを作成/表示します。これにより、クローン内のIDが複製されます。クリックイベントハンドラー内で、フォームの単純なIDセレクターを使用し$('#'+id)て対応する入力要素を検索した場合、ダイアログで入力要素が見つかりませんでした。セレクターを現在の形式に制限することになり$(this).closest('form').find('#'+id)ました。完全なハンドラーは次のようになります。

$(document).on('click', 'form label', function(e) {
    var id = $(this).attr("for");
    if (id.length > 0) {
        // Because this is a dialog box, restrict our search to
        // the form we are currently on to avoid finding the same id
        // elsewhere.
        var $checkbox = $(this).closest('form').find('#'+id);
        $checkbox.attr("checked", !$checkbox.attr("checked"));
    }
    return false;
});
于 2013-02-25T22:06:38.733 に答える