jQueryajax成功页面中的搜索框-循环中的问题

Search box in a jQuery ajax success page - issues in loop

本文关键字：循环 问题 搜索 成功 jQueryajax      更新时间：2023-09-26

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

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

我的问题是：我知道如果我要在b.php中执行jQuery ajax，我将在第一个success part中编写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>

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

.live（）–jQuery API

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

首先，我认为您应该将ajax调用附加到单击链接：现在的做法是在页面加载后立即执行ajax调用。

    $(document).ready(function(){
//when you click a link call b.php
    $('a.yourclass').click(function(){
        $.ajax({
            url: "b.php", 
            dataType: "html",
            type: 'POST', 
            data: "data = something", 
            success: function(data){
            $("#result").html(data);
            var value = $('#search').val();
                $.ajax({
                    url: "b.php", 
                    dataType: "html",
                    type: 'POST', 
                    data: "data =" + value, 
                    success: function(data){
                        $("#result").html(data);
                    }
                });
            }
        });
      });
    });

通过这种方式，每次点击带有"yourclass"类的链接时，都会发送对b.php的ajax调用，如果成功，就会进行另一次调用（总是对b.php）。我不明白这是否是你想要的，如果你发布你的html，我的答案会更好。

当然，在b.php中，您需要回显一些可以在回调中使用的html

奇怪的是，你尝试做两个这样的ajax请求，当然一个就足够了。如果您需要支持多个文本框，那么只需调整选择器即可。

你的整个代码可以缩写成这样：

$(document).ready(function() {
    $('#result').load('b.php', { data: $('#search').val() });
});

因此，如果你想在点击链接时搜索值（对于#container内的链接）：

$('#container').delegate('a', 'click', function() {
   // .text() will get what's inside the <a> tag
   $('#result').load('b.php', { data: $(this).text() });
});
相关文章：