Javascript ajax，我总是需要请求两次

我正在将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");
                      }
                    });               
            });

    }  

功能展示（thelink）
{
var cat=thelink.innerHTML；
var productContainer=document.getElementById（“productContainer”）；
$.ajax({
类型：“POST”，
url:“fetchdata1”，
数据：“cat=”+cat，
成功：功能（数据）{
productContainer.innerHTML=“”；
var$productContainer=$（“#productContainer”）；
$。每个（数据、函数（键、值）{
if（值['newVar']==1）
{
$productContainer.append（“\n\

\n\

\n\
通过“+value['company']+”
RS.“+value['price']+”\n\


；
}  
否则{
$productContainer.append（“\n\

\n\

\n\
通过“+value['company']+”
RS.“+value['price']+”）；
}
}) ;
}      
});
返回false；
}
函数foo（obj）{
变量pid=$（对象）.attr（“pid”）；
$（obj）.bind（“单击”，函数（）{
$.ajax（{
类型：“POST”，
url:“removeFromWishlist”，
数据：“pid=”+pid，
成功：功能（响应）{
log（“发送的ajax请求”）；
}
});               
});
}  

---

您正在将一个额外的

onclick

处理程序绑定到

。删除

在处理动态添加的元素上的回调时，最好使用
$（document）.on（“click”、'selector'，function（）{…}）在
document
上下文上绑定所有必需的事件

因此，不要使用
a href='#'class='remove'onclick='foo（this）'pid='”+
执行此操作（请参见下面的代码片段）

这将分离HTML布局及其行为

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

在同一元素上绑定两次“单击”侦听器
使用javascript内联html代码
使用
onclick
属性直接绑定javascript函数
不悄悄地使用javascript
希望有帮助。
如果您将其保存在文档就绪函数中，那么将jQuery单击处理程序绑定到
onclick
处理程序中的元素毫无意义。这就是为什么您必须单击两次，但第二次clcik将绑定一个新的jQuery侦听器also@KishanKumar您不能将
foo（）放入
inside ready…在单击的全局空间中不可用occurs@charlietfl那么我应该怎么做呢？在元素上使用类，使用事件委派，停止使用内联JavaScription没有解释为什么，也没有建议不要使用内联脚本，而是使用不引人注目的脚本。这不是1997年，我想我必须绑定它因为我在jQuery.Ajax中创建的html无法识别onclick函数，因为它是动态html。@当然，如果有人问我，我会建议使用charlietfl。我刚刚指出了现有脚本可能出错的地方，Op显然在尝试使用不引人注目的方法……但你告诉他们不要这样做。你会这样做吗自己编写代码？@charlietfl我通常使用
$（document）绑定事件。在动态元素上（“click”，func…}
，是的，我避免使用onclick-inline-with-elements
$(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");
        }
    });
});