jQuery的.load（）/阿贾克斯（）的返回的HTML不执行JavaScript的追加后 [英] jQuery .load() / .ajax() not executing javascript in returned HTML after appended

问题描述

我已经试过用 .load（）和 $。阿贾克斯来得到一些HTML需要被附加到一个容器中，但返回的HTML内的Javascript当我其追加到一个元素没有被执行

I've tried using .load() and $.ajax to get some HTML that needs to be appended to a container, but the Javascript within the returned HTML is not being executed when I append it to an element.

使用 .load（）：

$('#new_content').load(url+' #content > *',function() {
    alert('returned');
});

我也试着切换到$就调用。然后我提取之后，我就追加到容器返回的HTML的脚本，但是同样的问题，在JS没有被执行，甚至附加在这种情况下，而据我了解，试图追加＆LT;脚本＆GT; 来这样的DOM元素是令人难以接受的。

I've also tried switching to a $.ajax call. I then extracted the script from the returned HTML after which I appended it to the container, but same problem, the JS isn't being executed or even appended in this case, and as I understand it, trying to append a <script> to a DOM element like this is frowned upon?

使用 $ AJAX ：

$.ajax({ url: url }).done(function(response) {
    var source  = $("<div>").html(response).find('#overview_script').html();
    var content = $("<div>").html(response).find('#content').html();

    $('#new_content').html(content);
    $('<script>').appendTo('#new_content').text(source).html();

});

在理想情况下我会跑这个JavaScript的回调后，我已经附加了HTML，但变量被设置到从控制器返回的值。

Ideally I would run this javascript in a callback after I have appended the HTML, but variables are being set to values that are returned from a controller.

因此​​，在总结，我想获得一些HTML，其中包含JS需要之后HTML已追加到运行，但我有没有运气使用 .load（）或 $。阿贾克斯（）作为脚本返回的HTML或者消失后追加的，或者不执行的。

So in summary, I am trying to get some HTML which contains JS that needs to be run after that HTML has been appended, but I have had no luck using .load() or $.ajax() as the script in the returned HTML either disappears upon appending it, or it does not execute at all.

推荐答案

在负载（）用于一个片段选择脚本元素将片段之前被清除掉加入这样的脚本将不会被执行。

When load() is used with a fragment selector the script element will be stripped out before the fragment is added thus the script will not get executed.

当调用.load（）使用URL没有后缀选择   前pression，内容被传递为.html（）脚本是之前   除去。这将执行脚本块它们被丢弃之前。如果   .load（）被调用，一个选择的前pression附加到URL，   然而，脚本之前DOM被更新剥离出来，   因此不执行。这两种情况下的一个例子在下面可以看到：

When calling .load() using a URL without a suffixed selector expression, the content is passed to .html() prior to scripts being removed. This executes the script blocks before they are discarded. If .load() is called with a selector expression appended to the URL, however, the scripts are stripped out prior to the DOM being updated, and thus are not executed. An example of both cases can be seen below:

所以尽量

$.get('partial.html', function(result){
    $result = $(result);

    $result.find('#content').appendTo('#new_content');
    $result.find('script').appendTo('#new_content');
}, 'html');

演示：小提琴

这篇关于jQuery的.load（）/阿贾克斯（）的返回的HTML不执行JavaScript的追加后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！