jquery - 为 ajax 加载的内容应用 jquery 函数

Question

我有一个问题..问题是jquery不适用于ajax内容..我的jquery：-

$(document).ready(function() {

$('.mainWorkImage').hover(function() {
    $(this).find('.caption').fadeIn(200);
},
function() {
    $(this).find('.caption').stop(false,true).fadeOut(200);
});

});

内容 ： -

            echo "<div class=\"mainWorkImage\" projects=\"".$mainResult['category']."\"><a href=\"work.php?page=".$mainResult['id']."\"><img name=\"mainWorkImage\" src=\"".$mainResult['imageUrl']."\" width=\"212\" height=\"207\" alt=\"\"/><div class=\"caption\"><p>PROJECT NAME:</p><p>".$mainResult['projectName']."</p><br/><p>PROJECT TYPE:</p><p>".$mainResult['category']."</p></div></a></div>";

这里发生的事情是，当下拉更改内容将使用 AJAX 从 DB 获取并显示时，我有一个下拉列表。但标题 div 不显示从 AJAX 加载的内容。请帮我 。提前致谢...

Answer 1

根据您的 jquery 版本，看看http://api.jquery.com/on/ 替代使用“实时”处理程序。

.hover() 处理程序不起作用，因为目标在应用时不存在。

Answer 2

您可以在成功加载 ajax 时绑定函数

IE

$.ajax{
url:
data:
    success(function){
     //put your bind elements here
    }
}

或者，您可以使用on() api。

Answer 3

尝试

$(document).ready(function() {

$('body').delegate('.mainWorkImage','hover',function() {
    $(this).find('.caption').fadeIn(200);
},
function() {
    $(this).find('.caption').stop(false,true).fadeOut(200);
});

});