jQuery - DOMリスナの再初期化

Question

ドキュメントのロードが完了したときに初期化するjQueryイベントリスナーがたくさんあります。その部分は正常に動作しています。私はajax呼び出しを行い、HTMLの文字列としてレスポンスを取得する関数を持っています.HTMLの一部にjqueryを追加します。追加機能は動作しますが、新しいHTMLスニペットコードはjQueryイベントリスナーでは動作しません。ロードされたDOMの一部ではないからです。 jQueryイベントリスナーを再初期化する方法はありますか？

私はイベントリスナーを関数（関数a）に格納しようとしましたが、リスナーを再初期化したいときはいつでもその関数を呼び出しようとしました。リスナーが新しいHTMLスニペットに応答したにもかかわらず、リスナーの結果は2倍になり、関数a（）が呼び出されるたびに倍増し、大きなバグが発生しました。

私はjQueryとAngularをミックスしています。ここでは抜粋です。ここ

$(document).ready(function(){ 
    $('.like-btn').click(function(){ 

     var likeStatus = $(this).data('like-status-json'); 
     var contentType = $(this).data('content-type'); 
     var contentID = $(this).data('content-id'); 
     var likeMeter_id = '#' + contentType.toLowerCase() + '-' + 'likemeter' + '-' + contentID; 
     var likeMeter_elm = $(likeMeter_id); 

     // console.log(likeStatus, contentType, $(likeMeter_elm)); 

     var obj = { 
     likeStatus: likeStatus, 
     contentType: contentType, 
     contentID: contentID, 
     likeMeter_elm: likeMeter_elm, 
     likes: parseInt($(likeMeter_elm).text()), 
     og_elm: $(this) 
     } 

     $scope.likeAction(obj); 

    }); 
}); 

$scope.likeAction = function(dataObj) { 
    // console.log(dataObj); 

    var req = { 
     method: 'POST', 
     url: '/action/ajax/', 
     headers: { 
     'Content-Type': 'application/json', 
     'responseType': 'json', 
     "Accept" : "application/json", 
     'X-CSRFToken': Cookies.get('csrftoken') 
     }, 
     data: { 
     action: dataObj.likeStatus.action, 
     info: dataObj, 
     csrfmiddlewaretoken: Cookies.get('csrftoken'), 
     } 
    } 

    $http(req).then(function(resp){ 
     // Success Callback 
     // console.log(resp); 
     $(dataObj.og_elm).data('like-status-json', resp.data.likeStatus); 
     $(dataObj.og_elm).removeClass(dataObj.likeStatus.class).addClass(resp.data.likeStatus.class); 
     $(dataObj.og_elm).children('span.like-text').text(resp.data.likeStatus.text); 
     $(dataObj.likeMeter_elm).text(resp.data.likeMeter); 
    }, 
    function(resp){ 
     // Error Callback 
     // console.log(resp); 
    }); 
    } 

は、新しいHTMLスニペットを追加しアヤックスです：

$scope.addPostCommentUser = function(inputELM, dataObj) { 
    if(inputELM == undefined || dataObj == undefined) { 
     console.log('Missing Inputs...'); 
     return; 
    } 

    console.log(dataObj); 
    // return; 

    var req = { 
     method: 'POST', 
     url: '/action/ajax/', 
     headers: { 
     'Content-Type': 'application/json', 
     'responseType': 'json', 
     "Accept" : "application/json", 
     'X-CSRFToken': Cookies.get('csrftoken') 
     }, 
     data: { 
     action: 'addPostCommentUser', 
     info: dataObj, 
     csrfmiddlewaretoken: Cookies.get('csrftoken'), 
     } 
    } 

    $http(req).then(function(resp){ 
     // Success Callback 
     console.log(resp); 
     var id = '#cmlst-' + dataObj.post_id; 
     $(id).append(resp.data.comment_html) 
     $(inputELM).val(''); 


    }, 
    function(resp){ 
     // Error Callback 
     console.log(resp); 
    }); 
    } 

Answer 1

あなたが代わりにclick及びその他のon -call、使用する必要がある - それを解決する必要があります。

ので、代わりの$('.like-btn').click(function()あなたは、私はそれはあなたが持っている機能のミックスと角度で動作しますが、それを試してみて、表示されます100％わからない$('.like-btn').on('click',function()

を行うだろう。

Answer 2

イベント委任を使用して、動的に作成された要素の親要素にイベントをアタッチします。 .on()

$("[id|=cmlst]") 
.on("click" 
, "css selector of element within `resp.data.comment_html` at `.then()`" 
, clickHandlerFunctionReference); 

Answer 3

実際にこの問題を解決する独自の方法が見つかりました。

私は、与えられた引数/入力パラメータから要素にjQueryイベントリスナーを適用する関数を作成しました。だから私はサーバー側AJAXからHTML文字列を取得するたびに、私は新しいDOM要素を作成し、その関数に渡すためにjQueryを使用します！ これは完全に実際に動作します！ここで

は一例です：

$scope.applyNewLikeListeners = function(elm) { 
    $(elm).find('.like-btn').on('click', function(){ 
     var likeStatus = $(this).data('like-status-json'); 
     var contentType = $(this).data('content-type'); 
     var contentID = $(this).data('content-id'); 
     var likeMeter_id = '#' + contentType.toLowerCase() + '-' + 'likemeter' + '-' + contentID; 
     var likeMeter_elm = $(likeMeter_id); 

     var obj = { 
     likeStatus: likeStatus, 
     contentType: contentType, 
     contentID: contentID, 
     likeMeter_elm: likeMeter_elm, 
     likes: parseInt($(likeMeter_elm).text()), 
     og_elm: $(this) 
     } 

     $scope.likeAction(obj); 
    }); 
    } 

それは働きます！

$scope.addCommentReplyUser = function(inputELM, dataObj) { 
    if(inputELM == undefined || dataObj == undefined) { 
     console.log('Missing Inputs...'); 
     return; 
    } 

    console.log(dataObj); 
    // return; 

    var req = { 
     method: 'POST', 
     url: '/action/ajax/', 
     headers: { 
     'Content-Type': 'application/json', 
     'responseType': 'json', 
     "Accept" : "application/json", 
     'X-CSRFToken': Cookies.get('csrftoken') 
     }, 
     data: { 
     action: 'addCommentReplyUser', 
     info: dataObj, 
     csrfmiddlewaretoken: Cookies.get('csrftoken'), 
     } 
    } 

    $http(req).then(function(resp){ 
     // Success Callback 
     console.log(resp); 
     var id = '#rplst-' + dataObj.comment_id; 
     var elm = $(resp.data.reply_html) 
     $(id).append(elm) 
     $(inputELM).val(''); 
     $(dataObj.replyMeter_elm).text(resp.data.replyMeter); 
     $scope.applyNewLikeListeners(elm); 

    }, 
    function(resp){ 
     // Error Callback 
     console.log(resp); 
    }); 
    }