Ajax requests increase with live jQuery

Question

I have code below which I use clone() and live() . The code is loaded in the jQuery UI dialog box with a link. Whenever I click a link, it goes to the server and populates the dialog with the following code. The first temporary page loads, it works fine, but if I close the dialog box and click the link again to get the dialog box, the number of Ajax requests that are sent increases.

The first time I send a change trigger, I send only one request, I close the dialog and load it again, and then run the change, it sends two Ajax requests at the same time, the third time three requests at the same time and so on.

What do you think is my problem?

 <input id="TaskId" name="TaskId" type="hidden" value="18" /> <div id="MainDiv"> <div id="toClone"> <div style="display: inline;"> <select id="Tasksess"> <option value="">لطفاً کار را انتخاب کنيد</option> <optgroup label="کار های جديد"> <option value="16"style="">q3fe</option> <option value="18"style="">fjhv j</option> <option value="19"style="">wref</option> <option value="25"style="">ff</option> </optgroup> <optgroup label="کار های در دست اقدام"> <option value="13"style="">rr</option> <option value="15"style="">yy</option> </optgroup> <optgroup label="کار های تمام شده"> <option value="14"style="">tt</option> <option value="18"style="">fjhv j</option> </optgroup> </select> </div> <div style="display: inline;"> <select id="Statusess" name="Statusess"><option value="">لطفاً وابستگی را انتخاب کنيد</option> <option value="1">پيشنياز</option> <option value="2">همنياز</option> </select> </div> <div style="display: none;" id="Ok"> ok </div> <div style="display: none;" id="noOk"> تکراری </div> <div id="loadingGif" style="display: none;"> <img src="/Content/Images/ajax-loader/253L.gif" alt=""/> </div> </div> </div> <script type="text/javascript"> $(document).ready(function () { var Maindiv = $("#MainDiv"); var toClone = $("#toClone"); //$("#Statusess").each(function () { $("#Statusess").live('change', function () { if ($(this).find(":selected").val() != "") { if ($(this).parent().prev().find(":selected").val() != "") { $(this).parent().parent().find("#loadingGif").attr("style", "display: inline;"); $.ajax({ url: '/ProjectAdmin/Project/AddTaskDependency?MainTaskId=' + $("#TaskId").val() + '&DependentTaskId=' + $(this).parent().prev().find(":selected").val() + '&Status=' + $(this).find(":selected").val(), type: 'GET', success: function (data, status) { if (data != "0") { $(this).parent().parent().find("#Ok").attr("style", "display: inline;"); $(this).parent().parent().find("#noOk").attr("style", "display: none;"); } else if (data == "0") { $(this).parent().parent().find("#Ok").attr("style", "display: none;"); $(this).parent().parent().find("#noOk").attr("style", "display: inline;"); } var div = $('div:eq(0)', Maindiv).clone(); Maindiv.append(div); } }); $(this).parent().parent().find("#loadingGif").attr("style", "display: none;"); } } }); //}); }); </script> 

Answer 1

as stated above, you should use .delegate() instead of .live() .

To use delegate all you have to do is specify the parent in which you will listen, and the selector on which it will act.

Try the following:

 <script> $(function(){ var Maindiv = $("#MainDiv"); var toClone = $("#toClone"); $("#MainDiv").delegate('#Statusess','change', function () { if ($(this).find(":selected").val() != "") { if ($(this).parent().prev().find(":selected").val() != "") { $(this).parent().parent().find("#loadingGif").attr("style", "display: inline;"); $.ajax({ url: '/echo/html/', type: 'POST', success: function (data, status) { data = "1"; if (data != "0") { $(this).parent().parent().find("#Ok").attr("style", "display: inline;"); $(this).parent().parent().find("#noOk").attr("style", "display: none;"); } else if (data == "0") { $(this).parent().parent().find("#Ok").attr("style", "display: none;"); $(this).parent().parent().find("#noOk").attr("style", "display: inline;"); } var div = $('div:eq(0)', Maindiv).clone(); Maindiv.append(div); } }); $(this).parent().parent().find("#loadingGif").attr("style", "display: none;"); } } }); }); </script> 

Here you have a working jsfiddle , also here is a link to link to . delegate () .

Answer 2

You must try:

 $("#Statusess").off('change').on('change', function() { }); 

PS: only with jQuery 1.7+. If you cannot update:

 $("#Statusess").die('change').live('change', function() { }); 

Answer 3

In this case, you should not use live, because the bindings are “remembered” every time the dialog opens. If I understand your problem correctly, you should use 'click' instead of live binding.

Answer 4

Does your server code respond to javascript below?

If so, your problem is that javascript is executed once for each time the ui dialog is loaded, which leads to additional binding, so every time you execute your code, you add an additional request.

It would be easy to fix in this case, move the javascript code to the page loading the ui dialog.

Answer 5

Either bind the event handler directly, without live() or any other delegation method, or move the code to an external script file so that you do not load the same code with every ajax call. Using die() is just a group help for a problem that does not need to exist and can be fixed simply.

If you leave the code in place, just use:

  $("#Statusess").change(function () {... 

Answer 6

Perhaps you can try:

  jQuery(function ($) { var Maindiv = $("#MainDiv"); var toClone = $("#toClone"); $("#Statusess").on('change', function () { if ($(this).find(":selected").val() != "") { if ($(this).parent().prev().find(":selected").val() != "") { $(this).parent().parent().find("#loadingGif").css("display", "inline"); $.ajax({ url: '/ProjectAdmin/Project/AddTaskDependency?MainTaskId=' + $("#TaskId").val() + '&DependentTaskId=' + $(this).parent().prev().find(":selected").val() + '&Status=' + $(this).find(":selected").val(), type: 'GET', success: function (data, status) { if (data != 0) { $(this).parent().parent().find("#Ok").css("display", "inline"); $(this).parent().parent().find("#noOk").css("display", "none"); } else if (data == 0) { $(this).parent().parent().find("#Ok").css("display", "none"); $(this).parent().parent().find("#noOk").css("display", "inline"); } var div = $('div:eq(0)', Maindiv).clone(); Maindiv.append(div); div.empty(); } }); $(this).parent().parent().find("#loadingGif").css("display", "none"); } } }); });