jQuery.ajax，我总是要求两次

Question

我点击功能foo结合锚标记在jquery.ajax。我面临的问题是我必须两次请求或单击锚标记两次以提出请求。另外我注意到在网吧的浏览器中，ajax请求没有被触发，第一次当我点击锚标签时。但是当我打了两次后，我在网络标签中看到两个ajax请求。我不知道发生了什么事？

<script type="text/javascript"> 

function show(thelink) 
{ 

    var cat = thelink.innerHTML; 
    var productContainer = document.getElementById("productContainer"); 

    $.ajax({ 

      type:"POST", 
      url:"fetchdata1", 
      data:"cat="+cat, 

     success:function(data){ 
      productContainer.innerHTML =""; 
      var $productContainer = $('#productContainer'); 
      $.each(data,function(key,value){ 
       if(value['newVar'] === 1) 
       { 
       $productContainer.append("<div id='productBox' class='grid_3'>\n\ 
      <a href='product.jsp?id="+value['id']+"'><img src='"+value["image"]+"'/></a><br/>\n\ 
      <a href='product.jsp?id="+value['id']+"'><span class='black'>"+value['name']+"</span></a><br/>\n\ 
      <span class='black'>By "+value['company']+"</span><br/><span class='red'>RS."+value['price']+"</span>\n\ 
      <br/><br/><a href='#' class='remove' onclick='foo(this)' pid='"+value['id']+"'>REMOVE</a></div>"); 

      } 
      else{ 

      $productContainer.append("<div id='productBox' class='grid_3'>\n\ 
      <a href='product.jsp?id="+value['id']+"'><img src='"+value["image"]+"'/></a><br/>\n\ 
      <a href='product.jsp?id="+value['id']+"'><span class='black'>"+value['name']+"</span></a><br/>\n\ 
      <span class='black'>By "+value['company']+"</span><br/><span class='red'>RS."+value['price']+"</span></div>"); 
      } 
     }) ; 

    }  

    }); 

    return false; 
} 


    function foo(obj){ 

      var pid = $(obj).attr("pid"); 
      $(obj).bind("click", function(){  
        $.ajax({ 
         type:"POST", 
         url:"removeFromWishlist", 
         data:"pid="+pid, 

         success:function(response){ 
         console.log("sent ajax request"); 
         } 
        });    
      }); 

    } 

Answer 1

你是一个额外的onclick处理器结合.remove。

当使用动态添加元素的回调函数时，最好使用$(document).on("click", 'selector', function(){ ... });绑定document上下文中的所有必需事件。

所以不是a href='#' class='remove' onclick='foo(this)' pid='"+做到这一点（见下面的代码片段）

$(document).on("click", '#productBox .remove', function(){ 
    // your ajax call 
    $.ajax({ 
     type:"POST", 
     url:"removeFromWishlist", 
     data:"pid="+pid, 
     success:function(response){ 
      console.log("sent ajax request"); 
     } 
    }); 
}); 

这将分离你的HTML布局和它的行为。相同的元素

1. 绑定 '点击' 听众两次：

   下面的事情必须避免（感谢@charlietfl）。

2. 使用JavaScript内嵌您的html代码。
3. 直接结合使用onclick属性JavaScript函数。
4. 不使用javascript不显眼。

希望它有帮助。