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不顯眼。

希望它有幫助。