0

私は、jqueryon()が dom に動的に追加された (ajax やクローンなどを介して) 要素を添付したイベントに反応したという印象を受けました。ただし、以下は、ページの読み込み時に dom にアタッチされた要素に対してのみ機能します。私が使用して作成した他のコピーはclone()、うまく処理されていません。

$(document).ready(function () {
    $('.ship_via_dropdown').on('change', function () {
        console.log($(this));
        if ($(this).hasClass('prev_change')) {
            console.log('has');
        } else {
            $(this).addClass('prev_change');
            console.log('hasn\'t');
        }
    });
});

クローニングのためのコード:

$(document).ready(function(){
    var form1 = $('.line_item_wrapper').children().clone(); 
    $('#new_line_content_1').html(form1);
});

ドロップダウン用の HTML (ドキュメント準備完了時に jquery db query によって追加されたコンテンツ)

<span class="select ship_via_select_container">
    <select class="ship_via_dropdown ship_via_dropdown_1">
    </select>
</span>

洞察をありがとう！

4

4 に答える 4

6

代わりにイベントを委任します。

$(document).on('change', '.ship_via_dropdown', function () {
    console.log($(this));
    if ($(this).hasClass('prev_change')) {
        console.log('has');
    } else {
        $(this).addClass('prev_change');
        console.log('hasn\'t');
    }
});

または、さらに良いこと.clone(true)に、イベントで複製するために使用します。(注: これは、イベント ハンドラーがアタッチされた後にクローンを作成する場合にのみ機能します。)

于 2012-11-13T21:26:20.107 に答える
3

それはありますが、あなたが考える方法ではありません。そのまま使用した場合：

$('.ship_via_dropdown').on('change',

を使用するのと実際には違いはありません.change()。あなたが探しているのはevent delegationです。これは次の形式を取ります。

$("<selector to static ancestor>").on('change', '.ship_via_dropdown', function () {

<selector to static ancestor>動的に追加された要素の静的な先祖へのセレクターです。(動的に作成されないもの) 最後の手段として、documentここで使用できます。ただし、パフォーマンスのために、これは最も近い静的な祖先要素である必要があります。

于 2012-11-13T21:29:56.803 に答える
2

jqueryon()がイベントに反応し、動的に追加された要素を添付

いいえ - または少なくとも、委任されたイベントで使用する場合のみ。liveメソッドは、常にイベントをdocument.

于 2012-11-13T21:27:38.947 に答える
1

この行を変更します。

$('.ship_via_dropdown').on('change', function () {

これに：

$(document).on('change',".ship_via_dropdown", function () {
于 2012-11-13T21:26:28.923 に答える