jQuery function doesnt works after postback

Question

The code it works the first time. I'm trying to bold the text in a checkboxlist "elemets", but after a postback (submit button) the jQuery function for bold the text does not work anymore

$(document).ready(function () {
    var isPostback = $("#<%=hdnIsPostback.ClientID%>").val() === "ispostback";

    $("[id^=cbBold_]").css({ 'font-weight': 'bold' })
    if (!isPostback)
        $("#ddlPermissions").hide();

    $("[id*=CbList]").click(function () {
        var show = false;
        $("#ddlPermissions").hide();
        $("[id*=CbList] input:checked").each(function () {
            show = true;
        });
        if (show)
            $("#ddlPermissions").show();
    });

    var prm = Sys.WebForms.PageRequestManager.getInstance();

    prm.add_endRequest(function () {
        $("[id^=cbBold_]").css({ 'font-weight': 'bold' })
    });
});

CODE UPDATE:

<script>
    $(document).ready(function () {
        Sys.Application.add_load(function () {
            var isPostback = $("#<%=hdnIsPostback.ClientID%>").val() === "ispostback";

            $("[id^=cbBold_]").css({ 'font-weight': 'bold' })
            if (!isPostback)
                $("#ddlPermissions").hide();

            $(document).on('click', '[id*=CbList]', function () {
                var show = false;
                $("#ddlPermissions").hide();
                $("[id*=CbList] input:checked").each(function () {
                    show = true;
                });
                if (show)
                    $("#ddlPermissions").show();
            });

            var prm = Sys.WebForms.PageRequestManager.getInstance();

            prm.add_endRequest(function () {
                $("[id^=cbBold_]").css({ 'font-weight': 'bold' })
            });
        });
    });
</script>

you need to re-bind your jQuery events on prm.add_endRequest() — Sain Pradeep, Jan 09 '17 at 13:44
For `$("[id*=CbList]").click(function () {`, change this to `$(document).on('click', '[id*=CbList]', function () {` and see if that works. This is referred to as delegation. — Pegues, Jan 09 '17 at 13:44
This looks like a duplicate question to this one from 2012: http://stackoverflow.com/questions/9586903/document-ready-is-not-working-after-postback — JohnH, Jan 09 '17 at 13:45

score 0 · Answer 1 · answered Jan 09 '17 at 13:46

The following was added before you edited your OP with emphasis on something else that is wrong with your code:

Change:

$("[id*=CbList]").click(function () {

to:

$(document).on('click', '[id*=CbList]', function () {

This is referred to as delegation.

Also, since you are using C# from the looks of it, you can also try adding the following to your code inside the document ready function, e.g.:

$(document).ready(function(){
    Sys.Application.add_load(function () {
        [ALL YOUR CODE HERE]
    });
});

jQuery function doesnt works after postback

1 Answers1