从一个ajax请求得到的结果调用另一个ajax - Call for another ajax from the result one ajax request got

我有头文件，其中我有搜索框，用户可以搜索产品，这适用于ajax请求&获取信息我已经livesearch.php文件。现在与搜索的产品，我想直接添加"添加到购物车"按钮。事实上，对于每个搜索结果，都会有一个按钮将产品添加到购物车中。为了实现这一点，我需要添加另一个ajax请求来将该产品添加到购物车中。但当我点击添加按钮时，什么都没发生。这是我的代码。

header。php

<script type="text/javascript">
$(document).ready(function()
{
$(".searchproductbrand").keyup(function()
{
var kw = $(".searchproductbrand").val();
if(kw != '')  
 {
  $.ajax
  ({
     type: "POST",
     url: "livesearch.php",
     data: "kw="+ kw,
     success: function(option)
     {
       $("#livesearch").show();
       $("#livesearch").html(option);
       document.getElementById("livesearch").style.border="1px solid #A5ACB2";
     }
  });
 }
 else
 {
   $("#livesearch").html("");
   document.getElementById("livesearch").style.border="0px";
 }
return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function()
{
$(document).live('click', '.buynow', function()
{
var productid = $(this).attr('id');
var quantity = $('.quantity_'+productid).val();
var type= $('.type_'+productid).val();
  $.ajax
  ({
     type: "POST",
     url: "db_addtocart.php",
     data: {'quantity'=quantity, 'type'=type, 'productid'=productid},
     success: function(option)
     {
        this.attr('value','Added');
     }
  });
return false;
});
});
</script>
<?php
<input type="text" id="text" class="searchproductbrand">
?>

livesearch.php

<?php
while(blah blah){
echo "<input type='text' id='quantity' class='quantity_".$row["productid"]."'>".
"&nbsp;<select name='type' class='type_".$row["productid"]."'>".
"<option value='Unit'>Unit</option>";
"</select>";
echo "&nbsp;<input type='button' class='button' id='".$row["productid"]."'
class='buynow' value='Buy Now'>";
}
?>

db_addtocart.php

该文件获取变量&插入到表中，没有什么重要的

我做错了什么?

尝试将js更新为下面的代码。我使用.delegate()而不是.live()，因为根据手册，使用jQuery 1.4.3+更好。

$(document).ready(function() {
    $(".searchproductbrand").keyup(function(){
        var kw = $(".searchproductbrand").val();
        if(kw != ''){
          $.ajax({
             type: "POST",
             url: "livesearch.php",
              data: {kw:kw},
             success: function(option){
               $("#livesearch").show();
               $("#livesearch").html(option);
               $("#livesearch").css("border","1px solid #A5ACB2"); // used $('#...') instead of document.getElementById() AND .css() instead of style.border
             }
          });
        }
        else {
           $("#livesearch").html("").css("border","0px"); // used $('#...') instead of document.getElementById() AND .css() instead of style.border
        }
        return false;
    });
    $(document).delegate('.buynow','click', function(){
        var productid = $(this).attr('id');
        var quantity = $('#quantity_'+productid).val(); // changed from .quantity_ to #quantity - requires change in php code
        var type= $('#type_'+productid).val(); // changed from .type_ to #type - requires change in php code
        $.ajax({
            type: "POST",
            url: "db_addtocart.php",
            context: this,  // added as 'this' below was out of scope. see the docs for more info
            data: {quantity:quantity, 
                   type:type, 
                   productid:productid},
            success: function(option){
                   this.value = 'Added'; // changed from this.attr('value','Added');
            }
        });
        return false;
    });
});

这也需要你更新在livesearch.php中创建的html到下面的代码。主要由class=...向id=...转变

<?php
   while(blah blah){
      echo "<input type='text' id='quantity_".$row["productid"]."' />";
      echo "&nbsp;<select name='type' id='type_".$row["productid"]."'>".
           "<option value='Unit'>Unit</option>".
           "</select>";
      echo "&nbsp;<input type='button' class='button buynow' id='".$row["productid"]."' value='Buy Now'>";
}
?>

这里是一个工作的JSFiddle示例- http://jsfiddle.net/X8n3d/

事情是这样的，你的$(".buynow").click被绑定到元素，这是在你的页面加载dom。任何在.buynow之后添加的按钮都没有事件。

你需要使用jQuery的on()方法，使click事件适用于所有元素。

只要把$('.buynow').click(function(e){..})换成$(document).on('click', '.buynow', function(e){..})就可以了