UpdatePanel + jquery using on() - updatepanel

Question

I've been experiencing the famous problem of jQuery not functioning after a postback. So I've done some research and the best new way is the live() function by jQuery. But turns out this one has been deprecated since version 1.7 and replaced with on() function.
So I transformed my jQuery plugin to use the on() function, but it still doesn't work after postbacks.
The plugin:
$(document).ready(function () {
$('.drag').on("mouseover", function () {
AfterPostBack();
$(this).draggable()
.click( function () {
$(this).draggable({ disabled: false });
}).dblclick( function () {
$(this).draggable({ disabled: true });
});
});
$('.text_label').on("blur",function () {
$(this).removeClass('focus');
});
});
var AfterPostBack = function () {
$('.drag').draggable("option", "containment", 'parent');
$('.drag').draggable("option", "snap", 'parent');
$('.drag').draggable("option", "cursor", 'move');
};
The web page:
<script type="text/javascript" src="Scripts/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.8.23.custom.min.js"></script>
<script type="text/javascript" src="Scripts/myplugin.js"></script>
<link href="Styles/myplugin.css" rel="stylesheet" type="text/css" />
<asp:UpdatePanel runat="server" ID="UP1" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<asp:Button ID="btn_AddText" runat="server" Text="Add Text" OnClick="AddText" />
<asp:PlaceHolder ID="ph1" runat="server">
<div class="drag">
<asp:Label ID="lbl1" class="text_label" runat="server" Text="Click Me"/>
</div>
</asp:PlaceHolder>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btn_AddText" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
Would love some help on this.
Thanks.

Answer 1

You can use function pageLoad(sender, args) { } instead of $(document).ready()
Instead of targeting browser-specific optimizations, the ASP.NET AJAX pageLoad() shortcut function is called as a result of a more uniform process.
That process is queued up the same way on all browsers, via a call to setTimeout with a timeout of 0 milliseconds. This trick leverages JavaScript’s single-threaded execution model to (theoretically) push the init event back until just after the DOM has finished loading.
Counter-intuitively, this isn’t the only point at which pageLoad() is called. It is also called after every partial postback. It basically functions as a combination of Application.Init and PageRequestManager.EndRequest.
source: https://encosia.com/document-ready-and-pageload-are-not-the-same/

Answer 2

there are 2 events add_init and document.ready run same time ones per page refresh
and the second is pageload that triggered every async postback ,but not triggered on first load
I made 3 functions and put the code where its relevent
Sys.Application.add_init(function () {
// Initialization code here, meant to run once.
try {
//doOnes();
doAllways();
} catch (e) {
console.log('Sys.Application.add_init: ', e);
}
});
$(document).ready(function () {
console.log('document.ready');
//doAllways();
}
function pageLoad() {
console.log('pageLoad');
//doAftrerAjax();
doAllways();
}
function doOnes() {
console.log('doOnes');
}
function doAftrerAjax() {
console.log('doAftrerAjax');
}
function doAllways(){
console.log('doAllways');
AfterPostBack(); <---this the place for the code
}
`