jQuery.ajax，我总是必须请求两次

Question

我将click函数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上下文中$(document).on("click", 'selector', function(){ ... }); 。

因此，请执行以下操作（而不是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布局及其行为。

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

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

希望能帮助到你。