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

Question

I am binding the click function foo to the anchor tag in jquery.ajax . The problem I am facing is that I have to request twice or click the anchor tag twice to make the request. Also I have noticed in the browser under the network bar that ajax request is not triggered, first time when I hit the anchor tag. But when I hit it twice then I see two ajax request in the network tab. I have no idea what is going on?

 <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

You were binding an extra onclick handler to .remove .

When working with callbacks on dynamically added elements, its better to bind all required events on document context using $(document).on("click", 'selector', function(){ ... }); .

So instead of a href='#' class='remove' onclick='foo(this)' pid='"+ do this (see below snippet)

$(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");
        }
    });
});

This will separate your HTML layout and its behaviour.

Below things must be avoided (Thanks to @charlietfl):

1. Binding 'click' listeners twice on same element.
2. Using javascript inline with your html code.
3. Directly binding a javascript function using onclick attribute.
4. Not using javascript unobtrusively.

Hope it helps.