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的帖子项目及其ID和我点击时的时间。 vd_item_content .videoList .videoItem .vd_item_info .video_desc .video_cat_name span代码无法正常工作并执行任何操作。为什么它只能工作一次？

Answer 1

改变这个：

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) {
 .................
 })

Answer 2

这是因为您正在清空父容器并添加新数据。并且click函数与旧元素相关联。你应该通过将事件附加到静态父元素或正文来使用事件委托。

您也不需要使用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............
}

Ajax请求只工作一次，第一次请求代码无法工作后第二次

2 个答案: