Javascript jQuery-重新初始化DOM侦听器

我有很多jQuery事件监听器，它们在文档加载完成时初始化。那部分很好用。我有一个函数，可以进行ajax调用，并将响应作为HTML字符串，用jquery附加到DOM的某些部分。尽管append可以工作，但新的HTML代码片段不能与jQuery事件侦听器一起工作，因为加载时它不是DOM的一部分。有没有办法重新初始化jQuery事件侦听器

还有一件事：我尝试将事件侦听器存储在函数a中，并在需要重新初始化侦听器时调用该函数。这部分起作用了。。。尽管监听器对新的HTML代码段做出响应，但监听器的结果是双倍的，并且每次调用函数时都是双倍的，这导致了一个严重的错误

我混合了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片段的ajax：

$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);
    });
  }

你需要使用随叫随到，而不是点击和其他-这应该可以解决它

因此，在“单击”功能时，您将执行“$”.like btn.”而不是“$”.like btn.”clickfunction

---

我不是100%肯定它能与您拥有的函数和角度的组合一起工作，但请尝试一下，看看。

使用事件委派将事件附加到动态创建的元素的父元素。看

---

事实上，我找到了自己解决这个问题的方法

我创建了一个函数，将jQuery事件侦听器应用于给定参数/输入参数中的元素。因此，每当我从服务器端AJAX获取HTML字符串时，我都会使用jQuery创建一个新的DOM元素并将其传递给该函数！ 它实际上工作得很好

以下是一个例子：

$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);
    });
  }

---

或者$document.on'click'，'像btn一样，{/*…*/}函数，所以它不起作用，但感谢您的尝试？事实证明，jQuery侦听器将只侦听在读取/加载脚本时存在的元素。然而，我确实找到了解决这个问题的办法@ryanwaite28这个答案专门解决了这个问题。如果它不适合您，则说明您没有正确使用它。@KevinB OP在问答中使用了不同的选择器，请参阅var id='cmlst-'+dataObj.post_id；在原始问题中，var id='rplst-'+dataObj.comment_id；在OP的回答中cmlst-'不在OP回答的文本中。我的假设是，它正在破坏您将委托事件绑定到的父元素。我们需要更多地了解angular在页面中的附加和使用方式，以了解除了文档之外，我们还可以使用哪种父级进行绑定。虽然它不起作用，但感谢您的尝试？事实证明，jQuery侦听器将只侦听在读取/加载脚本时存在的元素。然而，我确实找到了解决这个问题的办法！我确定问题在于新的HTML没有绑定到jQuery选择器，因为在侦听器初始化时它们不存在。毫无疑问，用于选择元素的代码是正确的，它们是由python jinja模板引擎呈现的。我通过创建一个将给定DOM元素绑定到jQuery侦听器的函数修复/解决了这个问题。因此，每当我从AJAX获得HTML作为字符串时，我都会创建一个新的DOM元素并将其传递给该函数。它工作得很好。

$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);
    });
  }