Question

我的问题是如何让我的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>

ajaxHandling.php

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

Answer 1

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

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

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

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

Answer 2

我的简短回答是，您需要使用jQuery.on

以稍微不同的方式绑定点击事件

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

这会将点击事件动态绑定到与您的#text选择器匹配的#text元素（或稍后添加到#box_1元素）中的任何项目。

我的答案很长，如果你使用的是jQuery，你也应该利用它的AJAX库，而不是自己动手。

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

如何在AJAX返回的元素上运行javascript

2 个答案: