2013-03-12 58 views
0

我的問題返回的元素上運行,如何讓Java腳本是如何才能讓我的Java腳本上,通過AJAX返回的元素運行。該JavaScript不適用於AJAX返回的內容。在我的腳本中,它假設彈出一個帶有「你好」但不是的對話框。我怎樣才能使它工作或有其他方法呢?感謝您的建議。下面通過AJAX

的是我的代碼...

的index.html

<html> 
    <head> 
     <title></title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> 


     <script type="text/javascript"> 
      $(document).ready(function() { 
       $("#box_1").on("click", function() { 
        alert("Hello!"); 
       }); 

       changeDisplay(); 
      }); 

      function changeDisplay() { 
       if (window.XMLHttpRequest) 
       {// code for IE7+, Firefox, Chrome, Opera, Safari 
        xmlhttp=new XMLHttpRequest(); 
       } 

       else 
       {// code for IE6, IE5 
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
       } 

       xmlhttp.onreadystatechange=function() 
       { 
        if (xmlhttp.readyState==4 && xmlhttp.status==200) 
        { 
         document.getElementById("text").innerHTML=xmlhttp.responseText; 
        } 

       } 
       xmlhttp.open("POST","ajaxHandling.php",true); 
       xmlhttp.send(); 

      }; 
     </script>  
    </head> 
    <body> 
     <h1>Ajax Test</h1> 
     <div id="text"> 

     </div> 
    </body> 
</html> 

ajaxHandling.php

<?php 
    echo '<div id="box_1" class="box">Click me</div>'; 
?> 
+0

出於興趣,你有什麼理由爲什麼當你運行jQuery時使用vanilla JS作爲AJAX? – 2013-03-12 16:09:56

+0

爲什麼不使用jQuery提供的'ajax'函數?它允許你在發送ajax請求之前,在成功和完成之後調用函數。 http://api.jquery.com/jQuery.ajax/ – martincarlin87 2013-03-12 16:10:24

+0

除非你有一些禁止或不能JS庫添加到頁面,這是更好的使用jQuery,原型,或者有成千上萬的人已經測試了另一個庫,而比滾動你自己的Ajax例程。如果你不能添加JQuery,你應該在你的問題中說:) – Gus 2013-03-12 16:16:08

回答

4

一個共同的問題,你需要使用正確的on()未來元素的語法將其綁定到未來的父元素在腳本運行時存在的元素。

$(document).on("click", "#box_1", function() { 
    alert("Hello!"); 
}); 

我已經使用過文檔,但是使用最接近的現有父代更好。例如:

$("#wrapper").on("click", "#box_1", function() { 
    alert("Hello!"); 
}); 
+1

對於一些人閱讀jQuery的文檔實在是太難了 – letiagoalves 2013-03-12 16:11:50

+0

'。對()'爲未來的元素沒有得到很好的解釋,或者是不是我最後一次看着它。 – 2013-03-12 16:12:29

+0

有很多關於使用jQuery委託事件的文章。快速搜索比重新發布像這些常見問題 – letiagoalves 2013-03-12 16:13:24

0

我簡單的回答是,你需要點擊事件略有不同綁定,使用jQuery.on

$('#text').on('click', '#box_1', function() { 
    alert('Hello!'); 
}); 

此動態結合的Click事件到#text元素中的任何項目(或隨後到#text加入的元素)你#box_1選擇匹配。

我長的答覆是,如果你正在使用jQuery,你也應該充分利用它的AJAX庫,而不是滾你自己。

$.ajax({ 
    url: '/ajaxHandling.php', 
}).done(function (data) { 
    $('#text').html(data); 
}); 
+0

非常感謝您的意見,它的工作原理。 – overshadow 2013-03-12 16:28:56