JQuery $(document).ready ajax load

Question

我查看了许多相关的问题，但我的提问似乎与其完全不同。我正在通过JQuery Ajax调用加载整个中间div，并且我想能够自动执行一些JQuery操作，就像$(document).ready在加载DOM时允许那样。我读到livequery可以做到这一点，但我认为它内部应该有一种方法。我正在尝试在输入字段右侧最初添加日期选择器。

这是将调用后端内容并随后拉取某些特定部分的内容。

$.post("ReportingWizard",$("#wizard_form").serialize(), function (data) { setData(data); });

function setData(data) {
divElement.innerHTML = data;
$(activeTab).fadeIn(); //Fade in the active content
$(".wizardBody").fadeIn();
}

放置在该div元素中的文件内将具有需要运行的JQuery方法，以更改其中的html。

- Craig

---

你想做什么以及何时做？在“中间div”加载后吗？ - Felix Kling

我希望它在中间div加载之前被添加，但基于正在获取的内容。JQuery实际上在加载的内容中，并且基本上为div提供id，并向特定区域添加图像和日期选择功能。 - Craig

Answer 1

在AJAX函数的回调中注册事件。

如果您使用.load()加载中间div，请直接将jQuery代码放在回调中：

$('#middleDiv').load('/fish.php', function () {
    $('#someDiv').fadeIn(300); // ? whatever
});

如果您正在使用其他AJAX函数，请在回调中添加元素到DOM的行之后放置jQuery代码：

jQuery.get('/fish.php', function (response) {
    $('#middleDiv').html(response);

    $('#someDiv').fadeIn(300); // ? whatever
});

如果您想绑定事件，可以考虑使用on()（或者delegate()或.live()，如果您正在使用早期版本的jQuery，当这个问题最初被提出时，这些方法是存在的）。您可以在这里看到这些不同方法的比较。

这些方法允许将事件绑定到尚未出现在DOM中的元素上；这意味着即使元素尚未在DOM中注册，您也可以在$(document).ready()块中绑定事件。

- Matt

---

我正在使用相同的post方法对3或4个不同的数据选择进行处理，因此第二行是实际加载内容中的任何内容。已在常规区域内添加了我目前正在使用的代码。 - Craig

这将是我的最终解决方案，谢谢。然而最后我被告知我们实际上不需要Ajax，因为那些使用它的功能已被削减。 - Craig

我需要一个函数在一个有类名的元素上运行，当它被1）加载或2）通过ajax推入页面时。我尝试过 on('ready', '.my-class', handler)，但它没有起作用。 - Shimmy Weitzhandler

@Shimmy：当元素被添加到页面时，它们不会触发ready事件；ready事件是为图片、文档等（具有加载状态的元素）而设计的。没有跨浏览器的方法可以自动检测元素添加到页面的情况；您需要有条件地检查a）在加载时和b）每次通过AJAX更新页面时。 - Matt

Answer 2

Craig，

我认为你正在走一条艰难的路。

首先：虽然你可以在将响应注入页面之前使用javascript/jquery进行操作，但在它们被添加后立即进行操作会更容易（如文档就绪）。

其次：如果您要添加类似日期选择器之类的东西，我不确定该方法的有效性。我猜测在整个元素放置在页面之前，您无法向元素中添加日期选择器（只是猜测）。这些jQuery UI小部件在后台有很多事情要处理。

我建议您遵循Matt的建议。

如果您调用$.post，则回调函数与$（document）.ready函数相同，它将在响应可用时立即调用，因此您可以执行以下操作：

$.post(url, data, function(response) {
    $("#some_element").append(response);
    // Now your element has been injected you can do whatever u like here
    // call some function etc.
});

这是最佳操作方式。一旦数据被注入到您的页面中，就像$(document).ready一样，操作将立即完成。

如果您认为您正在做的事情存在一些滞后，并且您不希望用户看到，请将显示设置为隐藏，然后在操作完成后淡入或显示。

- going