JQuery $(document).ready ajax 加载

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3348462/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 15:16:56  来源:igfitidea点击:

JQuery $(document).ready ajax load

jqueryhtmlajaxfunctiondocument-ready

提问by Craig

I looked at quite a few of the related questions and I must be asking this completely different as I saw only a few that seemed to relate. I am loading an entire middle div via JQuery Ajax call and I simply want to be able to do some automatic JQuery on that new area like $(document).ready allows when a DOM is being loaded. I read that livequery would do this, but I figured there would be a way built into it. I am trying to add a date picker to a input field right a the beginning.

我看了很多相关的问题,我必须问这个完全不同的问题,因为我只看到了几个似乎相关的问题。我正在通过 JQuery Ajax 调用加载整个中间 div,我只是希望能够在该新区域上执行一些自动 JQuery,例如 $(document).ready 在加载 DOM 时允许。我读到 livequery 会这样做,但我认为会有一种内置的方法。我正在尝试在开始时将日期选择器添加到输入字段。

This is the content that will call for the content in the backend which will then pull some specific section.

这是将调用后端中的内容的内容,然后将拉出某些特定部分。

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

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

Inside the file that is being put at that divElement will have a JQuery method that needs to be run to change the html inside it.

在放置在该 divElement 的文件中,将有一个 JQuery 方法,需要运行该方法来更改其中的 html。

回答by Matt

Register the events in the callback of the AJAX function.

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

If you're using .load()to do load the middle div, place your jQuery code directly in the callback:

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

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

If you're using some of the other AJAX functions, place your jQuery code after the line where you add the elements to the DOM in the callback:

如果您正在使用其他一些 AJAX 函数,请将您的 jQuery 代码放在将元素添加到回调中的 DOM 的行之后:

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

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

If it's events you want to bind, you might look at using .on()(or .delegate()or .live()if you're using the older versions of jQuery, which were around when this question was originally written). You can see a comparison of these various methods here.

如果是您想要绑定的事件,您可能会考虑使用 . on()(或 .delegate()或者.live()如果您使用的是较旧版本的 jQuery,该版本最初是在编写此问题时出现的)。您可以在此处查看这些不同方法的比较。

These methods allow the binding of events to elements even when they are not yet present in the DOM; which means you can bind the events in your $(document).ready()block, even though the elements aren't registered in the DOM yet.

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

回答by going

Craig,

克雷格,

I think you are trying to go about this the hard way.

我认为你正试图以艰难的方式解决这个问题。

Firstly: Although you technically could manipulate the response with javascript/jquery before you inject them into the page, it's going to be a hell of a lot easier to do this immediately after they have been added (as per a document ready).

首先:虽然从技术上讲,您可以在将响应注入页面之前使用 javascript/jquery 操作响应,但在添加它们后立即执行此操作会容易得多(根据准备好的文档)。

Secondly: I'm not sure how effective that method would be if you were adding something like a datepicker. I'm guessing you can't add a datepicker to an element before the whole thing is in the page (just a guess). Those jQuery UI widgets have a lot going on in the background.

其次:如果您添加诸如日期选择器之类的东西,我不确定该方法的效果如何。我猜你不能在整个页面出现之前向元素添加日期选择器(只是猜测)。那些 jQuery UI 小部件在后台有很多事情要做。

I suggest you follow the advice of the Matt.

我建议你听从马特的建议。

If you call $.post, the callback function is the same as your $(document).ready function, it will be called as soon as the response is available so you could do something like this:

如果您调用 $.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.
});

This is the best way to go about it. The manipulation will be done as soon as the data has been injected into your page the same as $(document).ready.

这是最好的方法。一旦数据被注入到你的页面,就像 $(document).ready 一样,操作就会完成。

If you think there is some lag with what you are doing and you don't want your users to see, then set display to hide and then fade in or show once the manipulation has been done.

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