Question

In the below code, after success need to bind the click and should fire the event in the first click only.

$(this).click(function(){
   var $obj = $(this);
   var urlLink = someURL;
   var data = "id=" + "123";
   $.ajax({
        url : urlLink,
    data : data,
    cache: false,
    success : function(resp) {
      $obj.bind("click",eval(someFunction)); //This someFunction will call another function.
    }
   });
});

Please let me know how to fire two events like this in one click.
Right now, to execute i need to click twice.

Thanks in advance…

Answer 1

Your code is failing before the trigger, because the variable event is not defined, your function crashes at the line event.stopPropagation(). Also, try to get rid of eval in the event binding, what exactly is TRTP.showSourceToolTip?

If it’s a function, you can just do the following:

success : function(resp) {
    // Bind the click event to a function
    $obj.click(TRTP.showSourceToolTip);

    // This will call the function in the context of the object's DOM element
    TRTP.showSourceToolTip.apply($obj[0]);
}

Update:

The problem with the updated code is that you will just keep binding click events. If you bind and event in jQuery, it won’t replace the original, but both actions will fire in order. You might want to unbind() your ajax handler once there is a proper response.

The code below will actually unbind the ajax handler right after the request will fire to avoid repeated clicks before the response. Once the ajax is successful, it will bind a different handler, and triggers its click. If the ajax fails, it will bind the ajax handler back so the user can try again.

function ajaxHandler(){
    var $obj = $(this);
    var urlLink = someURL;
    var data = "id=" + "123";

    // Unbind the ajax handler to prevent re-fire before ajax request completes
    $obj.unbind("click", ajaxHandler);

    $.ajax({
        url: urlLink,
        data: data,
        cache: false,
        success: function(resp){
            // Bind the new event handler
            // Removed eval from the bind, put it back if you desperately need it
            $obj.bind("click", someFunction);

            // Fire click on Object
            $obj.click();
        },
        error: function(){
            // Put the ajax handler back so the user can try again if it fails
            $obj.bind("click", ajaxHandler);
        }
    });
}

// This is where you first bind the ajax handler
// I'm not sure what scope you're in, make sure this references the desired object.
$(this).click(ajaxHandler);