Question

Firstly, click a link will be having a ajax call and once it is returned success, will call another function…

//First Call
$(this).click(ajaxHandler);

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

Here, in “someFunction”, I am calling like,

someFunction: function(e){
    var evt = (e) ? e : window.event;
    var p = evt.target.name;
    var x = evt.pageX;
    var y = evt.pageY;
   ............
}

First time I am getting evt.pageX and evt.pageY is undefined. If I click on the link again, then giving the exact position.

I am getting data for evt.target.name for first time also.
These events are useful for tooltip.

Please, Help me how to identify the axis position for first time.
Thanks in advance…

Answer 1

It’s undefined the first time, because the click event is fired manually, not by the user clicking with the mouse. To work around it, you can call someFunction manually instead of triggering the event and you can pass the first call’s event variable through.

//First Call
$(this).click(ajaxHandler);

function ajaxHandler(e){
    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
            $obj.bind("click", someFunction);

            // call function in the context of $obj and pass through event variable
            someFunction.apply($obj[0],[e]);
        },
        error: function(){
            // Put the ajax handler back so the user can try again if it fails
            $obj.bind("click", ajaxHandler);
        }
    });
}

In someFunction you don’t have to do anything fancy with the event variable, jQuery normalises it for you:

someFunction: function(evt){
    var p = evt.target.name;
    var x = evt.pageX;
    var y = evt.pageY;
   ............
}