javascript - jQuery ajax 成功页面中的搜索框 - 循环中的问题

Question

首先，我的主页上有一些标签链接。单击每个，使用 jquery.ajax 将值发布到 b.php 并在 div#result 中返回值。

b.php 有一个搜索框。在其中搜索内容时。结果数据仍将显示在 div#result 中。

我的问题是:我知道如果我将在 b.php 中执行 jQuery ajax，我应该在第一个 成功部分 中编写 jQuery 代码。但这只能控制一次，当我继续在搜索框中搜索时，jQuery 不起作用。我想我遇到了循环问题。如何解决？

a.php

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">    
 $(document).ready(function(){
    $('.click').click(function(){
    var value1 = $(this).text();
        $.ajax({
            url: "b.php", 
            dataType: "html",
            type: 'POST', 
            data: "data=" + value1, 
            success: function(data){
            $("#result").html(data);
            $('#search').click(function(){
            var value = $('#search1').val();
                $.ajax({
                    url: "b.php", 
                    dataType: "html",
                    type: 'POST', 
                    data: "data=" + value, 
                    success: function(data){
                        $("#result").html(data);
                    }
                });
            });
            }
        });
      });
    });
</script>
<a rel="aa" class="click">aa</a>
<a rel="aa" class="click">bb</a>
<div id="result"></div>

b.php

<?php
echo $_POST['data'];
?>
<form name="form">
<input type="text" value="" id="search1">
<a name="nfSearch" id="search">search</a>
</form>

Answer 1

当一个新元素被引入到页面时，jQuery .click() 方法变得无用，因为它只能看到属于原始 DOM 的元素。您需要使用的是 jQuery .live() 方法，该方法允许您将事件绑定(bind)到在加载 DOM 后创建的元素。您可以在下面的链接中阅读有关如何使用它的更多信息。

.live() – jQuery API

$('#search').live('click', function(e) {
    // Prevent the default action
    e.preventDefault();

    // Your code here....
});