Question

我的头文件中有搜索框，用户可以在其中搜索产品，这适用于ajax请求＆amp;获取信息我是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

此文件获取变量和值的值。插入表格，没有什么重要的。

我做错了什么？任何帮助将不胜感激。

Answer 1

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

您需要使用jQuery的on（）方法，因此click事件适用于所有元素。

Juste将$('.buynow').click(function(e){..})替换为$(document).on('click', '.buynow', function(e){..})，它应该有效。

Answer 2

尝试将您的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/

从ajax请求获得的结果中调用另一个ajax

2 个答案: