javascript - jQuery().change 如何与 ajax 配合使用？

Question

我有一个输入字段，我使用 ajax 添加到 html 中:

function WritePrices(categories) {
    var strResult = "from: <input class=\"price\" type=\"text\" id=\"minCost\" value=\"" + categories.MinPrice + "\" />";
    strResult += "from: <input class=\"price\" type=\"text\" id=\"maxCost\" value=\"" + categories.MaxPrice + "\" />";
    $("#price-range").html(strResult);
}

然后我想捕捉用户更改此输入的时刻。这就是为什么在脚本中我也有更改方法

jQuery("input#minCost").change(function () {
        //...
    });

但是此方法不会“听到”我的输入字段的任何更改。仅当我的输入字段在 html 中创建时(而不是在脚本中)，它才会听到更改。我应该更改什么才能使 jQuery 看到我的输入字段的更改？

Answer 1

您必须在创建后立即分配事件。请在下面找到工作片段:

function WritePrices(categories) {
    var strResult = "from: <input class=\"price\" type=\"text\" id=\"minCost\" value=\"" + categories.MinPrice + "\" />";
    strResult += "from: <input class=\"price\" type=\"text\" id=\"maxCost\" value=\"" + categories.MaxPrice + "\" />";
    $("#price-range").html(strResult);
    jQuery("input#minCost").change(function () {
        alert("working");
    });
}

var categories = {};
categories.MinPrice = 0.0;
categories.MaxPrice= 10;
WritePrices(categories);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="price-range"></div>