Php 如何使java脚本在AJAX返回的元素上运行_Php_Javascript_Jquery_Ajax

Php 如何使java脚本在AJAX返回的元素上运行

php javascript jquery ajax

Php 如何使java脚本在AJAX返回的元素上运行,php,javascript,jquery,ajax,Php,Javascript,Jquery,Ajax,我的问题是如何让java脚本在AJAX返回的元素上运行。javascript在AJAX返回的脚本上不起作用。在我的脚本中，它假设弹出一个带有“Hello”的对话框，但事实并非如此。我如何才能让它工作，或者有其他方法？谢谢你的建议下面是我的代码 index.html <html> <head> <title></title> <meta http-equiv="Content-Type" content

我的问题是如何让java脚本在AJAX返回的元素上运行。javascript在AJAX返回的脚本上不起作用。在我的脚本中，它假设弹出一个带有“Hello”的对话框，但事实并非如此。我如何才能让它工作，或者有其他方法？谢谢你的建议

下面是我的代码

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>


$（文档）.ready（函数（）{
$（“#box_1”）。在（“单击”，函数（）{
警惕（“你好！”）；
});
changeDisplay（）；
});
函数changeDisplay（）{
if（window.XMLHttpRequest）
{//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}
其他的
{//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）
{
if（xmlhttp.readyState==4&&xmlhttp.status==200）
{
document.getElementById（“text”）.innerHTML=xmlhttp.responseText；
}
}
open（“POST”，“ajaxHandling.php”，true）；
xmlhttp.send（）；
};
Ajax测试

ajaxHandling.php

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

一个常见问题，您需要通过将未来元素绑定到脚本运行时存在的未来元素的父元素，为未来元素使用正确的

on（）

语法

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

我使用过文档，但使用最接近的现有父级更好。例如：

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

一个常见问题是，您需要为将来的元素使用正确的

on（）

语法，方法是将其绑定到脚本运行时存在的将来元素的父级

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

我使用过文档，但使用最接近的现有父级更好。例如：

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

我的简短回答是，您需要稍微不同地绑定click事件，使用：

这会将单击事件动态绑定到

#text

元素（或稍后添加到

#text

元素）中与您的

#box_1

选择器匹配的任何项目

我的详细回答是，如果您使用jQuery，您还应该利用它的AJAX库，而不是使用自己的库

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

我的简短回答是，您需要稍微不同地绑定click事件，使用：

这会将单击事件动态绑定到

#text

元素（或稍后添加到

#text

元素）中与您的

#box_1

选择器匹配的任何项目

我的详细回答是，如果您使用jQuery，您还应该利用它的AJAX库，而不是使用自己的库

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

出于兴趣，当您运行jQuery时，您为什么要使用vanilla JS作为AJAX？为什么不使用jQuery提供的

AJAX

功能？它允许您在发送ajax请求之前、成功时和完成时调用函数。除非您禁止或无法向页面添加JS LIB，否则最好使用JQuery、Prototype或其他数千人测试过的库，而不是使用自己的ajax例程。如果你不能添加JQuery，你应该在你的问题中说：）委托click函数，或者在ajax请求成功返回时重新绑定它。我只是这方面的新手，所以我确定哪种方法更好。非常感谢您的建议，我将阅读更多关于这方面的内容。出于兴趣，当您运行jQuery时，是否有任何理由使用vanilla JS进行AJAX？为什么不使用jQuery提供的

AJAX

.on（）

for future elements没有很好地解释，或者在我上次查看时没有解释。有很多关于使用jQuery委派事件的文章。快速搜索比重新发布这些常见问题要好。

（

）上没有很好地解释将来的元素，或者在我上次查看时没有解释。有很多关于使用jQuery委派事件的文章。快速搜索比重新发布这些常见问题要好