0

すべて、私は次のjQueryコードを持っています：

jQuery("#add_timeline_row").on("click", function(event){
    if(event.preventDefault){
        event.preventDefault();
    }else{
        event.returnValue = false;
    }
    var total_rows = jQuery('[name="timeline_num[]"]').length;
    alert(total_rows);
    total_rows = total_rows + 1;
    jQuery.post(site_url + "add_row.php", { total: total_rows },
        function(response) {
            jQuery('#timeline_table tr:last').after(response);
        });
});

これは正常に機能し、基本的に、ユーザーがボタンをクリックすると、DOMの読み込みが完了した後に行が追加されます。.on関数を追加したので、DOMが既にロードされているため、jQueryがそれを認識します。私の問題は、選択フィールドが作成されることです。次に、特定の選択値が選択された場合に行を削除する次のjQueryがあります。

jQuery('.event_selection').on('change' ,function(){
    var selected_event = jQuery(this).val();
    var fullId = jQuery(this).attr('id');
    var event_id = fullId.split('_');
    if(selected_event=="delete"){
        jQuery("#row"+event_id[1]).remove();
    }
});

DOMに追加された行については行が削除されますが、jQueryの最初のスニペットを介して追加した新しい行については変更が認識されません。これが期待どおりに機能しない理由は何ですか？

編集： 私はこれのためにJSフィドルを作成しました。ここで見つけることができます：http：//jsfiddle.net/Kc5R8/

[新しい行の追加]をクリックすると、すべての機能が失われ、新しいドロップダウンボックスが変更されてもアラートは生成されません。

事前にアドバイスをありがとう！

4

3 に答える 3

1

onメソッドをコンテナーにバインドしてから、セレクターを指定する必要があります。

http://jsfiddle.net/ZFGFv/2/をご覧ください 

jQuery('table').on('change', '.event_selection' ,function(){
    ... your code
});

このように、JQueryはコンテナをリッスンし、.event_selectionクラスを持つすべてのDOM要素を監視します。

于 2012-07-05T20:53:46.040 に答える
0

私もこの動作に気づき、呼び出しを「.on」から「.live」に変更することで回避しました。

jQuery('.event_selection').live('change' ,function(){
    var selected_event = jQuery(this).val();
    var fullId = jQuery(this).attr('id');
    var event_id = fullId.split('_');
    if(selected_event=="delete"){
        jQuery("#row"+event_id[1]).remove();
    }
});
于 2012-07-05T19:12:18.663 に答える
0

試す：

$(document).on('change', '.event_selection', function(){
    if (this.value == "delete") {
        $("#row"+this.id.split('_')[1]).remove();
    }
});
于 2012-07-05T19:17:23.537 に答える