Question

When a user clicks a table row, I use jQuery to select the link in one of the cells. This is fairly standard, from my searches.

$(document).ready(function () {
    $('table.timecarddetail tr').click(function () {
            var href = $(this).find("a").attr("href");
            if (href) {
                window.location = href;
            }
        });
    });  

Note: table.timecarddetail is the table class.

The embedded link is essentially an ajax call and so it does not do a full post back and the page doesn’t refresh. My problem is that the event fires once, but subsequent clicks are ignored.

The technical details: I’m using VS2010, and each link points to the same procedure passing in a record ID. A modal popup extender panel is populated with data from that record and then is displayed with panel.show.

What am I doing wrong here?

Answer 1

I’ve had the same problem whilst implementing JQueryUI in the past. The script manager destroys the javascript after an ajax post back. you can get around this by wrapping it in a function and calling it back on the beginning and the end of your ajax call

Jquery

$(document).ready(function () { 
    setRows();
});   

function setRows() {
$('table.timecarddetail tr').click(function () { 
        var href = $(this).find("a").attr("href"); 
        if (href) { 
            window.location = href; 
        } 
    }); 
}

Then in your page put this after your script manager

<asp:ScriptManager runat="server">
</asp:ScriptManager>
<script type="text/javascript">
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_beginRequest(BeginRequestHandler);
    prm.add_endRequest(EndRequestHandler);
    function BeginRequestHandler(sender, args) {
        setRows();
    }
    function EndRequestHandler(sender, args) {
        setRows();
    }
</script>

Hope this helps.