0

私はこの問題の解決策を模索してきましたが、オンラインで多くの同様の投稿に出くわしましたが、私の特定のインスタンスで機能する解決策はありませんでした。

要素のグループ内でjQueryit'inserAfter'を使用しています。グループは簡単に追加できますが、削除リンクをクリックするとremove（）関数が呼び出されますが、他のグループは問題なく削除できますが、新しく追加した要素には何も起こりません。

クリック関数にjQueryのon（）を使用していますが、動的に追加された要素ではまだ機能しません。

問題を再現するには、下のjsfiddleリンクに移動し、[グループの追加]ボタンをクリックして、DOMに追加された黄色のグループを確認します。次に、黄色のグループにカーソルを合わせて、削除ボタンを表示します。削除ボタンをクリックして、tada ... nothin '

次に例を示します。

http://jsfiddle.net/revive/5MFRm/

jQuery(function($) { 

    $( "#tabs" ).tabs();
    $("#group0").hide();
    $('.group-content').hide(); // Hide all group-content elements

    function clonePanel() {          
        var panel=$("#tabs #group0").clone(false),
            lastpanel = $("#tabs .group").last().index(),
            newid = 'group'+(lastpanel+1);

        panel.attr('id',newid).addClass('newpanel'); 
        panel.insertAfter($("#tabs .group").last()).show();
    }                 

    $(".add-group").on('click',function(){  
        clonePanel();    
    });

    $(".delete-group").on('click',function(){  
        $(this).closest('.group').fadeOut('slow', function(){$(this).closest('.group').remove(); }); 
    //          alert('done');
    });  

    $('#tabs').on('click', '.group-title-toggle',function(){ // Add class "hover" on dt when hover
        $(this).closest('.group-title').toggleClass('active').next().slideToggle(); // Toggle dd when the respective dt is clicked
    }); 

});
4

2 に答える 2

5

それがあなたが探しているものです：jQueryで、動的なhtml要素にイベントをアタッチする方法は？。

そして、これが正しく機能するコードです。 http://jsfiddle.net/5MFRm/2/

それ以外の$('.add-group').on('click', function() {})

この表記を使用する

$('body').on('click', '.add-group', function() {})

于 2013-03-11T17:09:00.037 に答える
0

jQueryliveを使用してください。将来作成されるすべてのオブジェクトをリッスンします。

于 2013-03-11T17:05:28.913 に答える