Question

我正在使用JQuery（1.10.1）来运行AJAX调用并将内容插入到DIV中。任何点击ajax DIV中的li标签都应该触发警报以及AJAX方法。第一次运行它有效，但后续调用失败，我没有收到警报。

我认为我应该在成功的AJAX调用之后绑定ajax DIV，但我不确定。我已经尝试过.on方法，然后是.bind，但是没有详细的JQuery理解，我不能再进一步了。可能会有一些我忽略的基本内容。

test1.php：

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function() { 

$('#ajax li').click(function() {    

    alert("Clicked");

    $.ajax({            
        type: "post",
        cache: false,           
        success: function(data){
            $('#ajax').load("test2.php");
        },
        error:function(){
            $("#ajax").html('Submission Error');
        }   
    }); 


});

});

</script>

</head>
<body>

<div id='ajax'>

<ul>
    <li>Example list item #1</li>
    <li>Example list item #2</li>
    <li>Example list item #3</li>
</ul>

</div><!-- Close ajax DIV -->

</body>
</html>

test2.php

<ul>
    <li data-val='100009'>Red</li>
    <li data-val='100008'>Blue</li>
    <li data-val='100007'>Green</li>
</ul>

Answer 1

您必须从执行绑定时存在的元素进行委派，您可以使用on。

更改

$('#ajax li').click(function() {

到

$('#ajax').on('click', 'li', function() {

Answer 2

您需要使用事件委派 -

$('#ajax').on('click','li',function() {

http://learn.jquery.com/events/event-delegation/

使用AJAX插入DIV内容后，JQuery无法正常工作

2 个答案: