javascript - 强制脚本在 AJAX 加载的页面中运行

Question

因此，我在 WP 安装中使用 AJAX 加载器，并且我正在加载的页面之一包含一个脚本。

<div id="register-form">
    <div id="register-one"></div>
    <div style="text-align:center;padding-top:10px;"></div> 
    <div class="horizontal-rule"></div>
    <div id='register'>
        <div id="register-character">
        </div>
    </div>

    <div class="post">  
        <form action="" method="post" id="register-form" >
        What's your Name:
            <input class=in id='register_name' name="register_name" onkeydown='register_step1_keydown();' onkeyup='register_step1_keyup();'>
            <input class="next-submit-button" type="submit" id="register-step-one" value="" />
            <input type="hidden" name="submit" />
        </form>  
    </div>
</div>

<script type="text/javascript">

$("#register-step-one").click(function() {
    $.ajax({
      type: "POST",
      success: function() {
        $('#register-form').html("Test");
      }
     });
    return false;
});

</script>

但是问题是，当通过 AJAX 加载页面时，脚本不起作用。然而，如果我刷新页面，脚本就会起作用。显然，该脚本不喜欢从 AJAX 调用运行。

有没有办法让脚本在通过 AJAX 调用加载时工作？我知道我可以将脚本放入主页的页脚或其他位置，但我希望我可以解决这个问题，因为我最终会在主页中得到大量脚本。

Answer 1

首先，您应该将函数包装在 .ready() 中，以确保在对这些元素执行操作之前加载所有 DOM 元素

此外，通过 jQuery 中的 ajax 函数返回的 HTML 中的脚本仅当 HTML 附加到 DOM 中时才会执行。由于您没有附加包含代码的 html，因此返回内容中的脚本将不会运行。

看看.ajax()函数的参数，位于 dataType

下

dataType:

...

"html": Returns HTML as plain text; included script tags are evaluated when inserted in the DOM.

...