Question

HTML

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

JS

$('ul').on('hover', 'li', function(){
 // ajax call to get data
 // and put the response data into current li as html
 $(this).html(data);
 // here $(this) is lost if both event fire at same time and DOM updated via second ajax response
});

$( window ).scroll(function() {
  // ajax call to get the next content and append into list
  $( "ul" ).append( data );
});

我正在通过ajax加载数据。

有两件事（1）盘旋在李和（2）滚动

如果用户同时触发两个事件并且首先响应滚动ajax调用，则附加到DOM中的元素，然后响应第二个ajax调用，并在成功回调中丢失$(this)。

Answer 1

似乎应该在ajax调用中使用context:this,，因此如果您使用jQuery.ajax()方法，则可以在其选项中添加context：

$.ajax({
  url:'',
  ......
  context: this,
  ......
});

如果您使用context，则其中提供的上下文将在ajax调用的所有回调中可用。

Answer 2

我认为您的问题是，在{ajax-call之后$(this)并不相同。 $（this）根据上下文而变化。

$('ul').on('hover', 'li', function(){
 var li_element = $(this);
 // ajax call to get data
 // and put the response data into current li as html

 // here $(this) is lost if both event fire at same time and DOM updated via second ajax response
 //li_element is equalent to $(this) when hovered, so try:
 li_element.html(data); 
});

$( window ).scroll(function() {
  // ajax call to get the next content and append into list
  $( "ul" ).append( data );
});

Answer 3

问题在于JavaScript代码的其他部分正在改变DOM中的html，这是失去事件的问题，jQuery追加工作正常，但其他地方的html正在改变＆＃34; innerHTML < /强>＆＃34;

<强>问题：

document.getElementById("ul_id").innerHTML = "<ul>...............</ul>";

使用jQuery附加解决问题

$('#ul_id').append("<li>html code...</li>");

DOM更新后jQuery丢失$（this）对象

3 个答案: