jQuery event is not called on single click rather gets called on double click

I am calling page getUserAdDetails.aspx?PID= inside a master page using j开发者_开发问答Query. I have to generate the id for button dynamically ... Code below works fine but it does not work on single click rather i have to double click the button to load the external page.. I am new to jQuery so i find it difficult to find a solution. Please check my code and would appreciate if some one can fix it..

If i also try to fire the same even on a link rather than button then it does not work.. Please see the code below this will give you an idea

<script type="text/javascript">
    function passPID(pid, psno) {
        $(document).ready(function () {
            $('#' + psno).html('<img src="images/ajax-loader-small.gif"/> Loading...');
            $('#' + pid).click(function () {
                    $('#' + psno).load("getUserAdDetails.aspx?PID=" + pid);
            });
        });
    }
</script>

<input id='<%# Eval("ProductIDGUID")%>'  type="button" value="View Details" onclick="passPID('<%# Eval("ProductIDGUID")%>', '<%# Eval("psno")%>' )" class="btncss" />

Change the script to:

function passPID(pid, psno) {
    $('#' + psno)
        .html('<img src="images/ajax-loader-small.gif"/> Loading...')
        .load("getUserAdDetails.aspx?PID=" + pid);
}

It was working with double click, because when you were clicking the first time, inside your function you were attaching a click event listener to that element. Then, when you were clicking for the second time, this handler was being executed.

Here is a solution with $.slideUp and $.slideDown animations:

function passPID(pid, psno) {
    var $psno = $('#' + psno);
    $psno.html('<img src="images/ajax-loader-small.gif"/> Loading...');
    $.get('getUserAdDetails.aspx?PID=' + pid, {} , function(html){
        $psno.slideUp(100, function(){
            $psno
                .html(html)
                .slideDown();
        })
    }, 'html');
}