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 元素

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

看看 .ajax()函数的参数，在 dataType

下

dataType:

...

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

...