javascript - ajax 不适用于多个选择框

Question

我通过单击添加按钮有多个选择框，并且所有选择框都有对更改事件的 ajax 调用，但它不起作用。只为第一工作。 代码如下。

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

$(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'));
        });
    });

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

现在就试试吧。