Question

我遇到了ajax loader（wordpress）的问题

我正在使用主题和主题的ajax加载程序按钮来杀死我的内联脚本。

我读了很多关于这个问题的10篇文章，但我无法得到任何解决方案。

我们怎么办这个问题？

这是我的javascript代码。

＆＃13;

if (typeof(localStorage) == 'undefined') {
  document.getElementById("warning").innerHTML =
    'Browser not supported Storage...';
} else {
  
$('.item').each(function() {
    var div = $(this).closest(".item").attr("id");
    
    if (localStorage["Catalin-" + div] == 1) {
      $(this).addClass('selected');
    }
    
});


$(document).ready(function() {
  
  
$('.buton').on('click', function() {   
   var div1 = $(this).closest(".item").attr("id");
   var $oku_kontrol = $(this).closest('.item');
   
   $oku_kontrol.toggleClass('selected');
   
   if ($oku_kontrol.hasClass('selected')) {
     localStorage.setItem("Catalin-" + div1, 1);
   }
   else {
     localStorage.setItem("Catalin-" + div1, 0);
   }
     
});   
  
  
});  
  
}

＆＃13;

.item {
    width:200px;
    height:80px;
    border:1px solid red;
}

.selected {
background-color:yellow;
}

.buton:after {
color:white;
display:inline-block;
padding:6px;
background:green;
content:"Click Me!";
}

.selected .buton:after {
background:black;
content:"You already did ;)";
}

＆＃13;

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>


<div id="1" class="item">1<br>
<a class="buton"></a>
</div>

<div id="2" class="item">2<br>
<a class="buton"></a>
</div>

<div id="3" class="item">3<br>
<a class="buton"></a>
</div>


<div id="warning"></div>

＆＃13;

此代码在整个网站上运行。但是当页面加载器（使用ajax）加载同一div中的一些内容时：没有控制台错误，但代码不再工作。所以点击功能也不行。

非常感谢。

这是我的ajax加载器javascript代码

＆＃13;

		$('.pager_load_more').click(function(e){
			e.preventDefault();
			
			var el = $(this);
			var pager = el.closest('.pager_lm');
			var href = el.attr('href');
			
			// index | for many items on the page
			var index = $('.lm_wrapper').index(el.closest('.isotope_wrapper').find('.lm_wrapper'));

			el.fadeOut(50);
			pager.addClass('loading');
			
			$.get( href, function(data){

				// content
				var content = $('.lm_wrapper:eq('+ index +')', data).wrapInner('').html();

				if( $('.lm_wrapper:eq('+ index +')').hasClass('isotope') ){
					// isotope
					$('.lm_wrapper:eq('+ index +')').append( $(content) ).isotope( 'reloadItems' ).isotope({ sortBy: 'original-order' });
				} else {
					// default
					$( content ).hide().appendTo('.lm_wrapper:eq('+ index +')').fadeIn(1000);
				}
				
				// next page link
				href = $( '.pager_load_more:eq('+ index +')', data ).attr('href');		
				pager.removeClass('loading');					
				if( href ){
					el.fadeIn();
					el.attr( 'href', href );
				}

				// refresh some staff -------------------------------

				mfn_greyscale();
				
				mfn_jPlayer();
				
				mfn_pretty();

				// isotope fix: second resize
				
				setTimeout(function(){
					$('.lm_wrapper.isotope').isotope( 'layout');
				},1000);
				
				
			});

		});

＆＃13;

Answer 1

我的预感是页面加载器正在改变DOM，这会破坏你的jQuery绑定。在处理动态加载内容时，您希望遵循此格式。

将动态加载的内容包裹在容器内，如div。

<div id="outerDiv">
    //... stuff that gets reloaded here
</div>

然后，对于您的jQuery绑定，使用此绑定到外部容器。

$(document).load(function()
{
    $('#outerDiv').on('click', '.button', function(e)
    {
        e.preventDefault();//------ add this
        e.stopPropagation();
        // whatever your button does

        return false;
    });
});

以下是发生的事情。假设我们只是使用这个

    $('.buton').on('click', function().....

当页面加载时，jQuery会查找每个.buton并将click侦听器附加到它上面。但随后您的页面加载器会更改这些项目。 JQuery必须返回并重新绑定所有内容才能知道页面上的内容（但不要这样做）。代替。绑定到不更改的项目。由于outerDiv仍然存在，这就是jQuery发现的。然后它查看它内部以找到要使用的任何.button项。

编辑：你的锚标签导致导航，因此使用e.preventDefault()打断它们。您也可以添加e.stopPropagation()，但这不应该是问题。不要忘记将e放在function(e)正上方。

内联javascript代码在下一页之后通过ajax loader无法正常工作

1 个答案: