запрос Ajax работает только один раз, второй раз после того, как первый код запроса не работает

Question

У меня есть запрос Ajax с помощью следующего кода

jQuery("ul.catLists li a, .vd_item_content .videoList .videoItem .vd_item_info .video_desc .video_cat_name span").each(function(){   
    jQuery(this).click(function (e) { 
     jQuery(".scrollable_cats").hide(); 
     $(this).parent().addClass("activeTab");   
     $(this).parent().siblings().removeClass("activeTab"); 
     $(this).parent().parent().parent().find('li.restcats ul li').removeClass("activeTab"); 
     $(this).parent().parent().parent().parent().find('.music_part ul li').removeClass("activeTab"); 
     e.stopPropagation();     
     var termId = $(this).attr('id');      
     var url = '/wp-admin/admin-ajax.php?action=get_current_terms&termId='+termId;    
     jQuery.ajax({    
      type: "get",     
      url: url,    
      success: function (data){      
       jQuery('.vd_item_content').empty();    
       jQuery('.vd_item_content').append(data); 
       jQuery('.vd_item_content').css({"padding-bottom":"200px"}); 
       jQuery('#dot1').dotdotdot({ 
        wrap: 'letter' 
       }); 
       jQuery("ul.videoList li:nth-child(5n)").css({"margin-right":"0px"}); 
       jQuery('.share_hover_icon').each(function(){ 
        jQuery(this).hover( 
         function() { 
          jQuery(this).parent().find('.social_shareonhover').show(); 
          jQuery(this).parent().find('.social_shareonhover').addClass("slideInLeft"); 
         }, function() { 
          jQuery(this).parent().find('.social_shareonhover').hide(); 
          jQuery(this).parent().find('.social_shareonhover').removeClass("slideInLeft"); 
        }); 
       }); 

      jQuery('.videoImg').each(function(){ 
       jQuery(this).hover(
        function() { 
         jQuery(this).parent().find('.hidden_overlay').show(); 
         jQuery(this).parent().find('.hover_play').addClass("slideInRight"); 
        }, function() { 
         jQuery(this).parent().find('.hidden_overlay').hide(); 
         jQuery(this).parent().find('.hover_play').removeClass("slideInRight"); 
       }); 
      });   

      }    
     });    
     return false;   
    });  
}); 

После нажатия на .vd_item_content .videoList .videoItem .vd_item_info .video_desc .video_cat_name span он загружает сообщения с этим же .vd_item_content .videoList .videoItem .vd_item_info .video_desc .video_cat_name span с его идентификатором и тем временем, когда я нажимаю на .vd_item_content .videoList .videoItem .vd_item_info .video_desc .video_cat_name код пробела не работал и ничего не делал . Почему он работает только один раз?

Answer 1

Это потому, что вы опорожнение родительский контейнер и добавление новых данных. и функция щелчка связана со старыми элементами. вы должны скорее использовать делегирование событий, присоединив событие к статическому родительскому элементу или телу.

Также вам не нужно перебирать элементы с помощью each() и присоединять события индивидуально. вы можете просто прикрепить к самому селектору:

jQuery("body").on('click','ul.catLists li a, .vd_item_content .videoList .videoItem .vd_item_info .video_desc .video_cat_name span' , function (e) { 
    //rest code............ 
} 

Answer 2

Изменить это:

jQuery("ul.catLists li a, .vd_item_content .videoList .videoItem .vd_item_info .video_desc .video_cat_name span").each(function(){   
    jQuery(this).click(function (e) { 

в

jQuery('body').on('click', 'ul.catLists li a, .vd_item_content .videoList .videoItem .vd_item_info .video_desc .video_cat_name span', function (e) { 
................. 
})