Question

我有一个ajax调用，它会在响应后返回：

<div class="content">
    <script language="JavaScript">  
        function validate(){
            alert('validate is working');
        }
    </script>
    <div class="container">
        <a href="#" onclick="javascript:validate();">my button</a>
    </div>
</div>

现在，我想将响应转换为html并将其附加到页面，这会进行ajax调用。

$.get('test.php', function(data) {
    $('#someTarget').append($(data).find('.content').html());
});

我已尝试过上面的代码，但似乎这只是附加容器div。有没有办法将javascript代码块添加到我现有的页面中？

Answer 1

在你的代码中有两个问题：

$('#someTarget').append($(data).find('content').html());

$(data)解析并执行您的脚本，然后再将其插入DOM
假设您的意思是$(data).find('.content').html() html（）返回内容的innerHTML，您只需要$(data)。

试试这个：

<div class="content">
    <style type="text/javascript">  
        function validate(){
            alert('validate is working');
        }
    </style>
    <div class="container">
        <a href="#" onclick="javascript:validate();">my button</a>
    </div>
</div>

现在有一个技巧：我使用<style>来包装脚本，应该在解释并插入DOM之后执行。

$.get('test.php', function(data) {

    // parse HTML to DOM
    var $data = $(data);

    // take the scripts out
    var $inlineScripts = $('style[type="text/javascript"]', $data).remove();

    // Now append the DOM
    $('#someTarget').append($data);

    // And globalEval the scripts
    $inlineScripts.each(function () {
        $.globalEval(this.innerText);
    });
});

对于由单击处理程序调用的简单验证函数，您目前不需要我的内联脚本技巧，但是当您有活动脚本时，您将需要它，应在解析HTML后执行和已插入。

更新：如果你不想插入'.content'，不要使用html（） - 因为它返回一个字符串，所以你要解析html两次。请改用.append( $(".container", $(data)) )或.append( $(data).find(".container") )。

如何将字符串中的javascript块附加到html中？

1 个答案: