What's the right replacement for deprecated .live() statement in jquery-3-3-1

Question

Night everybody, I have a problem to apply this script in ASP.Net Web Form and the latest Jquery library (jquery-3-3-1) to show the progress bar (original reference taken from this site)

<script src="Scripts/jquery-3.3.1.min.js"></script>
<script src="Scripts/jquery-ui-1.12.1/jquery-ui.min.js"></script>
<link href="CSS/jquery-ui-themes-1.12.1/themes/excite-bike/jquery-ui.min.css" rel="stylesheet" />

<style type="text/css">
    .modal {
        position: fixed;
        top: 0;
        left: 0;
        background-color: black;
        z-index: 99;
        opacity: 0.8;
        filter: alpha(opacity=80);
        /*-moz-opacity: 0.8;*/
        min-height: 100%;
        width: 100%;
    }

    .loading {
        font-family: Arial;
        font-size: 10pt;
        border: 5px solid #67CFF5;
        width: 200px;
        height: 130px;
        display: none;
        position: fixed;
        background-color: White;
        z-index: 999;
    }
</style>

<script type="text/javascript">
    function ShowProgress() {
        setTimeout(function () {
            var modal = $('<div />');
            modal.addClass("modal");
            $('body').append(modal);
            var loading = $(".loading");
            loading.show();
            var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
            var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
            loading.css({ top: top, left: left });
        }, 200);
    }        

    //Deprecated
    //$('form').live("submit", function () {
    //    ShowProgress();
    //});

    $('form').on("submit", function () {
        ShowProgress();
    });
</script>

Maybe one of the problem is .live() is deprecated because when i use old jquery below, the script run well.

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

And then i try to replace with two of these command in the latest jquery-3.3.1 as the API Documentation said, the both script still won't run:

$('form').on("submit", function () {
    ShowProgress();
});

and with this one:

$('form').submit(function () {
ShowProgress();
});

So please help for what's the idea to fix this problem? Sorry about my bad english and best regards for the advices.

This question has already been asked and answered before: https://stackoverflow.com/questions/9805307/jquery-jquery-1-7-1-min-js-live-deprecated-use-on https://stackoverflow.com/questions/8191064/jquery-on-function-for-future-elements-as-live-is-deprecated https://stackoverflow.com/questions/9422069/jquerys-live-is-deprecated-what-do-i-use-now https://stackoverflow.com/questions/8752321/jquery-live-vs-on-method-for-adding-a-click-event-after-loading-dynamic-ht I suggest you search once before asking. — GreatDharmatma, Sep 05 '18 at 05:34

score 1 · Answer 1 · answered Sep 05 '18 at 05:31

1

Try the following code:

$('body').on('submit', 'form', function() {
    ShowProgress();
});

This is the full signature of the .on() function:

.on( events [, selector ] [, data ], handler(eventObject) )

answered Sep 05 '18 at 05:31

GreatDharmatma

627
5
12

You can also use a selector that is a parent to the form in your DOM instead of using body. – GreatDharmatma Sep 05 '18 at 05:33

score 0 · Answer 2 · answered Sep 05 '18 at 07:22

0

The live() method was deprecated in jQuery version 1.7, and removed in version 1.9. Use the on() method instead.

answered Sep 05 '18 at 07:22

harshit gupta

32
4

What's the right replacement for deprecated .live() statement in jquery-3-3-1

2 Answers2