Question

我有多个选择框，点击添加按钮，所有选择框都有更改事件的ajax调用，但它不起作用。只能先工作。代码如下。

以下代码调用ajax作为默认选择框，但不适用于下一个动态插入的选择框..

＆＃13;

$(document).ready(function () {
        $(".one").change(function () {
            var one = $('.one').val();
            var company = $('.one').next();
            $.ajax({
                url: 'https://champbaba.tk/demo/two.php',
                data: {'one': one},
                type: 'POST',
                success: function (data) {
                    $(company).html(data);
                }
            });
        });
    });


    $(document).ready(function () {
        var companyhtml = $(".one").html();
        $(".add").click(function (e) { //on add input button click
            e.preventDefault();
            $('<select class="one">' + companyhtml + '</select><select class="two"></select>').insertAfter($('.wrap'));
        });
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
    <select class="one">
        <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>
    </select>
    <select class="two">

    </select>
</div>
<button class="add">Add</button>

＆＃13;

Answer 1

它正在运作，但我认为这不是一个好工作方式，你需要搜索如何重新初始化事件。

$(document).ready(function () { 
        var companyhtml = $(".one").html();
        $(".add").click(function (e) { //on add input button click
            e.preventDefault();
            $('<select class="one">' + companyhtml + '</select><select class="two"></select> <br>').insertAfter($('.wrap'));
            
             $("select").change(function () {
                var one = $(this).html();
                var company = $(this).next('select').html(one)
                $(this).next('select').val(1);
           });
        });
        
          $("select").change(function () {
              var one = $(this).html();
              var company = $(this).next('select').html(one)
              $(this).next('select').val(1);
           });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
    <select class="one">
        <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>
    </select>
    <select class="two">

    </select>
</div>
<button class="add">Add</button>

现在试试吧。

Answer 2

您遇到的问题是 event delegation 。

您尝试将事件处理程序附加到附加处理程序时在DOM中实际不存在的元素。添加document无法解决此问题，因为在页面加载后元素会生成动态。

要解决此问题，您必须 hoist the scope 并将事件处理程序附加到页面加载时将存在的元素，例如{{1 }}。您正在寻找$(document).on("change", ".one", function() {} )而不是$(".one").change(function() {} )：

$(document).ready(function() {
  /* Ajax Call... */
  $(document).on("change", ".one", function() {
    var one = $('.one').val();
    var company = $('.one').next();
    $.ajax({
      url: 'two.php',
      data: {
        'one': one
      },
      type: 'POST',
      success: function(data) {
        $(company).html(data);
      }
    });
  });

  /* To add more select boxes.. */
  var companyhtml = $(".one").html();
  $(".add").click(function(e) { //on add input button click
    e.preventDefault();
    $('<select class="one">' + companyhtml + '</select><select class="two"></select>').insertAfter($('.wrap'));
  });
});

希望这有帮助！：）

Answer 3

 $(".wrap").live('change','.one'function () {
        var one = $('.one').val();
        var company = $('.one').next();
        $.ajax({
            url: 'two.php',
            data: {'one': one},
            type: 'POST',
            success: function (data) {
                $(company).html(data);
            }
        });
    });

ajax不适用于多个选择框

3 个答案: