强制脚本在 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下

数据类型：

...

"html"：以纯文本形式返回 HTML； 在插入 DOM 时会评估包含的脚本标签。

...