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();
});

Answer 2

不确定我是否理解您的问题，但是在将ajax内容加载到当前页面的DOM后，您必须运行JS。

只需在ajax onsucess回调（jquery）上执行此操作

Answer 3

对于事件，您可以使用live命令而不是绑定。这将使事件触发通过ajax加载的内容。

对于像您的示例这样的代码，您需要在通过ajax加载任何HTML后运行该代码。通常这将来自ajax调用的成功回调。

Answer 4

取决于您从哪里调用此代码。

您的Ajax呼叫将进行回叫。只需从中调用此代码即可。

$(document).ready(function() {
  //call the method when the page loads
  setImageWidth();
}

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

function doSomeAjax() {
  $.ajax({
    type : "GET",
    url : 'http://somepath',
    success :
    // Call the method when receive successful response
    function(response) {
        setImageWidth();
     }
  });
}

Answer 5

在Ajax调用之后，您可能需要执行相同的函数来修复img宽度。您还可以考虑在修改的img上放置一个类（或数据），并在后续调用resize函数时对该类进行过滤。

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

//You could use the global event callback or 
//attach to the individual ajax requests that you know will add images
$(document.body).ajaxSuccess(resizeImages);

使用ajaxified内容（jQuery）做一些事情

5 个答案: