Question

Firstly, there have some tag links in my main page. click each one, post value to b.php with jquery.ajax and turn back value in div#result.

b.php have a search box. when search something in it. the result data will still show in the div#result.

my problem is: I know if I will do jQuery ajax in the b.php, I shall write the jQuery code in the first success part. but this only can control one time, when I continue search in the search box, the jQuery not work. I think I met a loop problem. How to solve it?

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

When a new element is introduced to the page the jQuery .click() method becomes useless because it can only see elements that were part of the original DOM. What you need to use instead is the jQuery .live() method which allows you to bind events to elements that were created after the DOM was loaded. You can read more about how to use it at the below link.

.live() – jQuery API

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

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