使用 AJAX 插入 DIV 内容后 JQuery 不工作 [重复]答案

【问题标题】：JQuery not working after inserting DIV content using AJAX [duplicate]使用 AJAX 插入 DIV 内容后 JQuery 不工作 [重复]
【发布时间】：2013-06-12 16:01:22
【问题描述】：

我正在使用 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>

【问题讨论】：

如果没有这些问题之一，StackOverflow 上的日子就不好过了。

标签： jquery

【解决方案1】：

您必须在进行绑定时从现有元素进行委托，您可以使用on。

改变

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

到

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

【讨论】：

【解决方案2】：

你需要使用事件委托 -

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

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

【讨论】：