0

こんにちは、私は Ajax に頭がおかしくなりそうです。

レコードを含む単純なテーブルがあります....各レコードをアクティブ化および非アクティブ化できます...

Activate は次の ajax コードを呼び出します。

$('#activate').click(function() {  
    var $this = $(this);
    var p1 = $this.data('p1'); 
    var p2 = $this.data('p2');
    $.ajax({                                                        
        url: '<?php echo base_url()."index.php/admin/registrations/activate";?>       /'+p1,
        type: "GET",
        cache: false,  
        success: function(response) {
            if(response == 1) {         
                $("#entry"+p1).html("<a id='deactivate' href='javascript:;'     data-p1='"+p1+"' data-p2='"+p2+"'>Deactivate</a>");
            }
        }
    });
});

Deactivate イベントは次の別の Ajax コードを呼び出します。

$('#deactivate').click(function(){  
        var $this = $(this);
        var p1 = $this.data('p1');
        var p2 = $this.data('p2');
         $.ajax({                                                        
            url: '<?php echo base_url()."index.php/admin/registrations/deactivate";?>/'+p1,
            type: "GET", 
            cache: false,    
            success: function(response) {  
                if(response == 0){ 
                    $("#entry"+p1).html("<a id='activate' href='javascript:;' data-p1='"+p1+"' data-p2='"+p2+"'>Activate</a>"); 
                }                                   
            }                   
        });                                                               
    });

アクティブ化が非アクティブ化に変わると....非アクティブ化リンクは機能せず、その逆も同様です...したがって、リンクは一度しか機能しません...

どうすればこれを修正できますか? 私はあなたの助けに感謝します

4

1 に答える 1

1

イベントをリンクにバインドするには、.on() を使用する必要があります。$('#deactivate').click(...) を使用すると、呼び出し時に DOM に存在する要素にのみバインドされます。.on() を使用して、現在および将来の要素にバインドします。

このステートメントで挿入しているリンク:$("#entry"+p1).html("<a id='activate'したがって、クリック イベントにまったくバインドされていないため、クリックしても何も起こりません。

詳細については、こちらを参照してください: http://api.jquery.com/on/

アップデート

これは、.on() を使用して現在および将来の要素にバインドする方法を示す Codepen です: http://codepen.io/anon/pen/ypvuh

[新しいリンクを追加] ボタンがクリックされたときに作成されて DOM に挿入される新しいリンクも、クリック イベントにバインドされることに注意してください。

したがって、あなたの場合、コードは次のようになります。

$('body').on('click','#activate',function() {  
    var $this = $(this);
    var p1 = $this.data('p1'); 
    var p2 = $this.data('p2');
    $.ajax({                                                        
        url: '<?php echo base_url()."index.php/admin/registrations/activate";?>       /'+p1,
        type: "GET",
        cache: false,  
        success: function(response) {
            if(response == 1) {         
                $("#entry"+p1).html("<a id='deactivate' href='javascript:;'     data-p1='"+p1+"' data-p2='"+p2+"'>Deactivate</a>");
            }
        }
    });
});

と

$('body').on('click','#deactivate',function() {    
        var $this = $(this);
        var p1 = $this.data('p1');
        var p2 = $this.data('p2');
         $.ajax({                                                        
            url: '<?php echo base_url()."index.php/admin/registrations/deactivate";?>/'+p1,
            type: "GET", 
            cache: false,    
            success: function(response) {  
                if(response == 0){ 
                    $("#entry"+p1).html("<a id='activate' href='javascript:;' data-p1='"+p1+"' data-p2='"+p2+"'>Activate</a>"); 
                }                                   
            }                   
        });                                                               
    });

IDはページ内で一意であるはずなので、リンクに「アクティブ化」および「非アクティブ化」のクラス属性を与えることを検討します。そうしないと、ページに同じIDを持つ複数のリンクが作成される可能性があります。変更する場合は、.on() バインディングのセレクターも必ず変更してください。

于 2013-11-09T21:41:47.860 に答える