Question

我在发布后使用.on（）方法时遇到问题。在第一次更改之后，我有3个下拉列表。当我更改第一个下拉列表时，其他的基于mysql数据库表重新填充。问题是第二个下拉列表的分离功能不能单独工作。这是html：

<div class="form-group row">
    <div class="col-md-4">
        <label for="inputIlha">Ilha</label><select name="ilha" class="form-control" id="inputIlha">
            <option value="1">Santa Maria</option>
            <option value="2">São Miguel</option>
            <option value="3">Terceira</option>
            <option value="4">Graciosa</option>
            <option value="5">São Jorge</option>
            <option value="6">Pico</option>
            <option value="7">Faial</option>
            <option value="8">Flores</option>
            <option value="9">Corvo</option>
        </select>
    </div>
    <div class="col-md-4">
        <label for="inputConcelho">Concelho</label>
        <select name="concelho" class="form-control" id="inputConcelho">
            <option value="0"></option>
        </select>
    </div>
    <div class="col-md-4">
        <label for="inputFreguesia">Freguesia</label>
        <select name="freguesia" class="form-control" id="inputFreguesia">
            <option value="0"></option>
        </select>
    </div>
</div>

和jquery函数成功地重新填充所有下拉列表：

$("#inputIlha").on("change", function() {
    var inputIlha = document.getElementById("inputIlha").value;
    $.post(config.base + "xxxx/xxxxxx/xxx01", { ilha: inputIlha }, function(result) {
        $( "#inputConcelho" ).replaceWith(result );
        var inputConcelho = document.getElementById("inputConcelho").value;
            $.post(config.base + "xxxx/xxxxxx/xxx02", { concelho: inputConcelho }, function(result) {
                $( "#inputFreguesia" ).replaceWith(result);
            });
        //$( "#inputFreguesia" ).html('<option value="0"></option>');
        }
    );
});

此函数正确地重新填充第二个（#inputConcelho）和第三个（#inputFreguesia）下拉列表。 #inputFreguesia基于#inputConcelho成功重新填充。

问题是我想要更改#inputConcelho。下一个功能不起作用。

$("#inputConcelho").on("change", function() {
alert("inputConcelho changed");
    var inputConcelho = document.getElementById("inputConcelho").value;
    $.post(config.base + "xxxx/xxxxxx/xxx02", { concelho: inputConcelho }, function(result) {
        $( "#inputFreguesia" ).replaceWith(result );
    });
});

我尝试添加提醒以查看是否有任何响应但未成功。我甚至试过这个功能：

$("#inputConcelho").click(function() {
    alert("inputConcelho changed");
});

每当我更改第一个下拉列表（#inputIlha）时，下拉列表都会重新填充。但是，当我改变第二次下调（#inputConcelho）时，我得到的不是警报或任何事情。知道可能是什么问题吗？我甚至尝试在第二个下拉列表中添加一个类，并在该类中调用它但没有成功。希望我清楚自己。

提前致谢。

Answer 1

由于您要替换第二个select元素，添加到这些元素的处理程序将丢失。

与Event binding on dynamically created elements?相同。

所以你需要在这里使用event delegation。

$("#inputConcelho").parent().on("change", '#inputConcelho', function () {
    alert("inputConcelho changed");
    var inputConcelho = document.getElementById("inputConcelho").value;
    $.post(config.base + "xxxx/xxxxxx/xxx02", {
        concelho: inputConcelho
    }, function (result) {
        $("#inputFreguesia").replaceWith(result);
    });
});

不是将处理程序绑定到#inputConcelho，而是将其绑定到该元素的父

Answer 2

我认为您不应该使用.replaceWith()函数，因为它会替换所有元素（将其从DOM中删除）。使用更好的.html(result)并更改服务器发送的结果，以便只有<option>元素。

Jquery在发布后改变不起作用

2 个答案: