如何在ajax成功回调中使用live（）

我正在使用AJAX显示文章的wordpress网站上工作。我在成功回调中添加了一些jquery代码。我的一个需求是在鼠标上显示图像。我的所有代码都可以工作，除了鼠标悬停效果如何在ajax成功回调中使用live（）

所以这是我的ajax功能：

function loadArticle(pageNumber, loop, term){  
    $.ajax({ 
     url: ajax_var.url, 
     type:'POST', 
     data: someData, 
     success: function(html){ 
      // This will be the div where our content will be loaded 
      $("#content").append(html);  

      // Zoom box 
      $('img.static').hide(); 
      $(".ad-preview").live({ 
       mouseover: function() { 
        $(this).find('img.static').stop().fadeIn(); 
       }, 
       mouseout: function() { 
        $(this).find('img.static').stop().fadeOut(); 
       } 
      }); 

      // Other stuff... 
     }); 

     return false; 
    } 

});

和HTML：

<div class="ad-preview"> 
    <a target="_blank" href=""> 
     <img src="img/zoom.png" /></a>    
    </a> 
</div>

什么是实现这种效果的好方法吗？

来源

2013-01-24 Adrien G

.live是主动监听由.on

更换你会将此Ajax调用外，在基础水平JS - 所以换句话说，不是里面的document.ready通话或其他功能里面。它将在通过ajax加载的dom元素上工作。

来源

2013-01-24 00:11:43

谢谢你的解释。我还有一个问题，就是关于代码优化。成功回调中有很多代码。我在一个特定的元素上使用jquery-ui滑块，我有一个投票过程（也使用AJAX），它在提交表单等后执行... 我应该创建另一个js文件并将所有与HTML有关元素通过AJAX加载（而不是在document.ready调用中）？ –

这取决于你的网站的大小。除非您运行的是大型网站，否则没有任何真正的理由需要优化到该级别。但是，每天大约20万用户不会因将几行js移动到另一个文件而受益，这些文件只能根据请求加载。这也取决于你的网站依赖于ajax的程度。最后你可能会做更多的工作，而不是节省几K。我想说的是，一个小型站点需要的唯一正常优化就是在修订之间进行缩减。 –

我明白你的意思了。再次感谢您:) –

首先，您应该使用on而不是live。其次，委托处理程序不必在回调中应用。由于它们被委托给页面上的更高级别的元素，因此您可以在页面加载中应用它们。

$("body").on('mouseover', '.ad-preview', function() { 
      $(this).find('img.static').stop().fadeIn(); 
    }) 
    .on('mouseout', '.ad-preview', function() { 
      $(this).find('img.static').stop().fadeOut(); 
    });

来源

2013-01-24 00:12:28 tvanfosson

感谢您的详细回复 –

如何在ajax成功回调中使用live（）

回答

相关问题