Số yêu cầu Ajax tăng lên với jQuery trực tiếp

Question

Tôi có mã bên dưới mà tôi sử dụng clone() và live(). Mã đang được tải trong hộp thoại Giao diện người dùng jQuery có liên kết. Bất cứ khi nào tôi nhấp vào liên kết đến máy chủ và điền vào hộp thoại có mã bên dưới. Trang đầu tiên đang được tải, nó hoạt động tốt, nhưng nếu tôi đóng hộp thoại và nhấp lại vào liên kết để nhận được hộp thoại số lượng các yêu cầu Ajax đang được gửi tăng lên. Lần đầu tiên tôi gửi kích hoạt thay đổi tôi chỉ gửi một yêu cầu, tôi đóng hộp thoại và tải lại và sau đó kích hoạt thay đổi, nó gửi hai yêu cầu Ajax cùng một lúc, lần thứ ba ba yêu cầu cùng một lúc và Sớm.

Bạn nghĩ vấn đề của tôi ở đâu?

<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

như đã nêu ở trên, bạn nên sử dụng .delegate() thay vì .live().

Để sử dụng delegate, tất cả những gì bạn cần làm là chỉ định phụ huynh mà bạn sẽ nghe và chọn công cụ sẽ thực hiện.

Hãy thử điều này:

<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> 

Tại đây bạn có một có một jsfiddle làm việc, cũng ở đây là một liên kết để tham khảo để .delegate() chức năng.

Answer 2

Trong trường hợp này, bạn không nên sử dụng trực tiếp vì các liên kết được 'ghi nhớ' mỗi lần mở hộp thoại. Nếu tôi hiểu vấn đề của bạn một cách chính xác, bạn nên sử dụng 'click' thay vì 'live' ràng buộc.

Answer 3

Bạn nên thử:

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

}); 

PS: chỉ với jQuery 1.7+. Nếu bạn không thể nâng cấp:

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

}); 

Answer 4

Hoặc ràng buộc xử lý sự kiện trực tiếp, mà không live() hay bất kỳ phương pháp đoàn khác, hoặc di chuyển mã để tập kịch bản bên ngoài, do đó bạn không được tải cùng mã trên mỗi cuộc gọi ajax . Sử dụng die() chỉ đơn giản là một trợ giúp ban nhạc cho một vấn đề mà không cần phải tồn tại và có thể được cố định đơn giản.

Nếu rời khỏi mã ở vị trí chỉ đơn giản là có thể sử dụng:

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

Answer 5

Có lẽ bạn có thể thử:

 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"); 

         } 
        } 
       }); 


     }); 

Answer 6

Mã máy chủ của bạn có phản hồi với javascript ở dưới cùng không? Nếu có, vấn đề của bạn là javascript được thực hiện một lần cho mỗi lần hộp thoại ui được tải, dẫn đến thêm một ràng buộc, do đó mỗi lần bạn thực thi mã, bạn sẽ thêm một yêu cầu bổ sung.

Việc khắc phục trong trường hợp này sẽ dễ dàng, hãy di chuyển mã javascript đến trang đang tải hộp thoại ui thay thế.