javascript - 使用 ajaxified 内容 (jQuery)

Question

HTML:

<div>
<img src="image.png" />
</div>

JS:

$("div img").animate({opacity:.5}, 200);

此 js 在页面加载后运行良好。但不处理由 ajax 加载的内容。给出的js代码只是一个例子。

问题是，如何让一些 js 代码适用于 ajaxified 内容？

---

这样试过:

function loadDone(){
    $("div img").animate({opacity:.5}, 200);
};

loadDone();

$.ajax({
    url: "test.html",
    success: function(){
        //do something
        loadDone();
    }
});

但它不起作用。

我知道如何添加触发器，问题是，这段代码没有使用任何触发器。它只在页面加载后才起作用，然后停止。应该也适用于 ajaxified 内容。

Answer 1

您的问题有点含糊，但这可能会有所帮助。

假设您在准备好文档时运行此代码:

$(function() { 
  if ($("div img").width() > $("div").width()){
    $("div img").css({"width": $("div").width()});
  }
});

您可以在 ajax 回调中重复此调用:

$("#some_div").load("/html_fragment_with_cool_image", function() { 
  if ($("div img").width() > $("div").width()){
    $("div img").css({"width": $("div").width()});
  }
});

或者，更进一步，将其包装在一个函数中。

function doDivStuff() {
  if ($("div img").width() > $("div").width()){
    $("div img").css({"width": $("div").width()});
  }
}

然后在需要时调用它。

$(function() { 
  doDivStuff();
});

$("#some_div").load("/html_fragment_with_cool_image", function() { 
  doDivStuff();
});