jQuery AJAX的问题-代码在加载时运行，然后什么也没有

Question

感谢您看我的问题！

这使我疯了几个小时。 我正在尝试使用jQuery AJAX将文件加载并呈现到页面上的div中。 由于某种原因，任何jQuery（或普通JS）在加载时都在运行，但是任何应单击的后续功能都不会运行。 HTML在DOM中呈现和更新，但是没有任何脚本标签。

我正在现有安装上构建WordPress网站，可以在这里查看： www.reckless-intent.com单击左侧边栏中的“联系人”链接可以复制我的问题。

在内容区域的顶部，将显示一个带有内容“按钮”的div。 加载内容时，将触发控制台日志。 该按钮绑定了一个功能，它应该触发另一个控制台日志-但是什么也没有发生！

这是其背后的所有代码：

以下功能首先显示加载动画，然后启动对get-contact.php文件的AJAX调用。

$('#loading').fadeIn('fast', function() {
    $.ajax({
        type: "GET",
        url: "http://www.reckless-intent.com/wp-content/themes/ri2/page-templates/get-contact.php",
        success: postToPage
    }); // close AJAX call
}); // close function

然后，下一个函数将请求的内容设置到代理div中，计算其高度，设置主容器“ stage”的高度的动画，然后在stage div中显示所请求的内容。

function postToPage(data, status) {
$('#proxy').html(data);
    var height = $('#proxy').height();
    $('#drawer').fadeIn('fast');
    $('#drawer').animate({'height': '300'}, 100);
    $('#stage').html(data);
    $('#stage').fadeIn(300);
    $('#loading').fadeOut('fast');  
}

get-contact.php文件包含以下内容：

<?php
/*
Template Name: get-contact
*/

require('../../../../wp-load.php'); ?>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
    console.log('Initial run');
    $('#test').on('click',test);
    function test() {
        console.log('button clicked');
    }
</script>

<div id="test">
    BUTTON
</div>

我真的不知道是什么原因造成的。 我所有的调用都在同一个域内，所以我认为不会有任何东西阻止脚本以这种方式运行。

你能为我指出正确的方向吗？ 如果您需要在网站上自己查看代码，我不会更改任何代码。

非常感谢您的宝贵时间！ :)

Answer 1

尝试像这样包装已加载的javascript以等待html加载

    <script type="text/javascript">
    $(function(){
       console.log('Initial run');
       $('#test').on('click',test);
       function test() {
        console.log('button clicked');
       }
    });
</script>

Answer 2

当您引用#test按钮时，DOM还没有准备好。 使用事件委托方法使事件冒泡DOM-我将以下js注入网站，现在注册了点击：

$('body').on({click:function(){console.log('clicked');}}, '#test');