0

我的问题是如何让我的 java 脚本在 AJAX 返回的元素上运行。javascript 不适用于 AJAX 返回的内容。在我的脚本中，它假设会弹出一个带有“Hello”的对话框，但事实并非如此。我怎样才能使它起作用，或者还有其他方法可以做到这一点？感谢您的建议。

下面是我的代码...

索引.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>';
?>
4

2 回答 2

4

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

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

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

$("#wrapper").on("click", "#box_1", function() {
    alert("Hello!");
});
于 2013-03-12T16:09:44.970 回答
0

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

$('#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);
});
于 2013-03-12T16:12:46.087 回答