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='"+ 这样做（见下面的sn-p）

$(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 布局及其行为。

必须避免以下事情（感谢@charlietfl）：

1. 在同一元素上绑定“点击”侦听器两次。
2. 在您的 html 代码中使用内嵌 javascript。
3. 使用onclick属性直接绑定javascript函数。
4. 不要不显眼地使用 javascript。

希望对你有帮助。