jjery在ajaxcomplete之后调用变量

Question

整个想法是通过下拉列表限制数字复选框，方法是： 我有以下代码的下拉列表

<select name="form[norequnit][]" id="norequnit" class="rsform-select-box">
  <option value="">...</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
</select>
<input name="chk" type="checkbox" class="bd-lable"  value="9432"><label>01</label>
<input name="chk" type="checkbox" class="bd-lable"  value="9432"><label>02</label>
<input name="chk" type="checkbox" class="bd-lable"  value="9432"><label>03</label>
<input name="chk" type="checkbox" class="bd-lable"  value="9432"><label>04</label>
<input name="chk" type="checkbox" class="bd-lable"  value="9432"><label>05</label>
<input name="chk" type="checkbox" class="bd-lable"  value="9432"><label>06</label>

由ajax和以下代码加载的一些复选框正在运行以获取下拉值，并且在ajax部分之后也会根据所选下拉列表限制选择数量，

<script type="text/javascript">
 jQuery(document).ready(function($) {

 $("#norequnit").on("change", function () {
 $('#unitcount').html($(this).find('option:selected').text());
 });

 $( document ).ajaxComplete(function() {

     $( ".log" ).text( "Triggered ajaxComplete handler." );

        var nux = $('#unitcount').text();

        $("input[name=chk]").change(function(){

    var max= nux;

    if( $("input[name=chk]:checked").length == max )
        {
            $("input[name=chk]").attr('disabled', 'disabled');
            $("input[name=chk]:checked").removeAttr('disabled');
        }           
        else{
            $("input[name=chk]").removeAttr('disabled');
            }
        })
   });

   });
  </script>

问题：

变量＆＃34; nux ＆＃34;仅在第一次尝试时通过选择下拉列表获取值，例如5，这样您就可以将框限制为5次检查，但在此之后如果您将下拉列表更改为任何其他数字，则复选框限制仍为5，换句话说＆＃34; NUX ＆＃34;不会得到新的变量。

Answer 1

您的代码存在一些问题，我会尝试逐个解释和修复它们。

选择onChange处理：

1. 将您的数据与您的观点分开
2. 使用val()代替text()获取选择的当前值

代码：

var nux; // 1. This will hold the value of nux for use in your script

$("#norequnit").on("change", function () {
    nux = $(this).val(); // 1. Save the data, 2. Use using val()
    $('#unitcount').html(nux); // 1. Use the data
});

您真的需要使用ajaxComplete吗？

我认为ajaxComplete是回应ajax调用的正确方法（我可能错了，我没有把所有代码放在我面前）。下面我已经做了最好的猜测，你应该（可能，可能）做什么。

代码：

// Assuming you've got your ajax call somewhere else, use the "success" 
// handler instead of the "ajaxComplete" function

$.ajax({
    url: yourUrl,
    method: 'get',
    data: {
        param1: 'value1',
        param2: 'value2', // etc
    },
    success: function(html) {
        // Presumably this is the HTML for your checkboxes, so add them
        // to the DOM
        $('#norequnit').after(html);

        // And the only thing that really should go here otherwise is
        // your bit of debug logging
        console.log("Triggered ajax success handler.");
    }
});

如果您只是输出调试文本

，请使用console.log

也许您确实想在页面上打印消息，如果是这样，您可以忽略它。至少，请注意这个出色的调试工具。您可以在浏览器中点击F12（开发者控制台）以查看输出。

console.log("Triggered ajaxComplete handler.");

将复选框onChange处理程序移到任何ajax闭包之外

否则你可能遇到一些非常难以调试的问题。

代码：

$(document).on('change', 'input[name="chk"]', function() {
    // Handler code here
});

请注意对on的稍有不同的调用，它使用document对象并包含context参数。这样可以确保在注册事件处理程序后添加到DOM 的任何对象仍将被处理。

所有这些

 jQuery(document).ready(function($) {
     var nux;

     $("#norequnit").on("change", function () {
        nux = $(this).val();
        $('#unitcount').html(nux);
     });

     $.ajax({
         url: yourUrl,
         method: 'get',
         data: {
             param1: 'value1',
             param2: 'value2', // etc
         },
         success: function(html) {
             $('#norequnit').after(html);
             console.log("Triggered ajax success handler.");
         }                
     });

     $(document).on("change", 'input[name="chk"]', function() {
         if ($('input[name="chk"]:checked').length == nux) {
             $('input[name="chk"]').attr('disabled', 'disabled');
             $('input[name="chk"]:checked').removeAttr('disabled');

             // Alternatively you could do this:
             $('input[name="chk"]').not(':checked').attr('disabled', true);
         } else {
             $("input[name=chk]").removeAttr('disabled');
         }
     });
});