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');