JQuery .click() event not firing in IE 8 and asp.net update panel

Question

Hello all I am experiencing some strange issue with a website and some jquery on a click event. Within IE 9 firefox and chrome this works fine. However IE 8 will not fire the click event.

This is an asp.net webform wrapped in an update panel. ]

aspx code

<asp:UpdatePanel ID="searchupdatePanel" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <div id="search" class="searchcontainer">
            <asp:TextBox ID="tbsearchterm" CssClass="watermark" runat="server" />

            <a href="#" class="button big left" id="btnSave">Save</a> 

        </div>
    </ContentTemplate>
</asp:UpdatePanel>

Within my js file I have the following this code is wrapped inside of a onPageLoad function

function pageLoad() {
...
    //SimpleModal Save Dialog
    $(function () {
        $('#btnSave').click(function (e) {
            var searchtrm = $('#tbsearchterm').val();
            if (searchtrm == "Enter Search Term" || $.trim(searchtrm) === "") {

                $('#alert-modal-content').modal({ overlayClose: false, close: false, containerId: 'alert-container' });
                $('<b>Whoops!</b><br/><br/><span>Before you can save your search you need to enter a search term or query.</span>').appendTo('#alertTerm');

            }
            else {
                $('#txt_ssQueryText').val(searchtrm);
                $('#save-modal-content').modal({ appendTo: 'form', overlayClose: false, close: false, containerId: 'saveSearch-container' });
            }
        });

    });
}

As I said this works fine in IE 9 but 8 and lower and the click event is never even touched (verified in debugger). I have seen some other posts which suggest using the .on() event but I have tested this by even using a class selector with no luck.

tried this but it did not work (work meaning the function was never called.

$(function () {
    $('.btntestclass').on('click', 'a', function (e) {
        var searchtrm = $('#tbsearchterm').val();
        if (searchtrm == "Enter Search Term" || $.trim(searchtrm) === "") {

            $('#alert-modal-content').modal({ overlayClose: false, close: false, containerId: 'alert-container' });
            $('<b>Whoops!</b><br/><br/><span>Before you can save your search you need to enter a search term or query.</span>').appendTo('#alertTerm');

        }
        else {
            $('#txt_ssQueryText').val(searchtrm);
            $('#save-modal-content').modal({ appendTo: 'form', overlayClose: false, close: false, containerId: 'saveSearch-container' });
        }
    });

});

Any suggestions as to why this is not executing in ie 8?

Thanks in advance

@Shyju yes multiple times ctrl+f5 as well as through the debugger — rlcrews, Mar 21 '12 at 01:19

score 0 · Answer 1 · answered Mar 20 '12 at 22:52

0

You colud try setting the jQuery click function in the Internet Explorer Developer Tools. Maybe the pageLoad() function is called before the $(document).ready().

answered Mar 20 '12 at 22:52

Gerson Beltrán

402
4
8

Yes you are correct page load is called first. This is required on asp.net update panels from the partial post backs. If I wrap it in a document ready function events or other functions are never accessed due to the update panel – rlcrews Mar 21 '12 at 01:22
I have worked with update panels with jQuery event handlers, these event handlers have been lost after the first postback. To fix the problem I did [this](http://stackoverflow.com/a/256253/1175355) – Gerson Beltrán Mar 21 '12 at 04:17
Thanks Gerson. I looked at your example and followed not only your steps but also those of other contributors. I was able to successfully get the events to work in ie9 and higher but no luck within ie8. – rlcrews Mar 21 '12 at 15:53

JQuery .click() event not firing in IE 8 and asp.net update panel

1 Answers1