How does jQuery().change work with ajax?

Question

I have an input field which I add to html using ajax here:

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);
}

And then I want to catch a moment when this input is changed by the user. That's why in the script I also have change method

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

But this method doesn't "hear" any changes to my input field. It hears changes only when my input field is created in html(not during in the script). what should I change to make jQuery seen changes to my input field?

[Event delegation](https://learn.jquery.com/events/event-delegation/) is essential here! — Dhaval Marthak, Mar 15 '18 at 13:10
use .on() Method for dynamically added elements http://api.jquery.com/on/ — Karthik Ganesan, Mar 15 '18 at 13:10
`$("#price-range").on("change","#minCost",function(){});` will work for you! — Dhaval Marthak, Mar 15 '18 at 13:11
Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Heretic Monkey, Mar 15 '18 at 13:18

Sumit Jha · Accepted Answer · 2018-03-21T20:56:13.823

You must assign event just after the creation. Please find working snippet below:

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>

score 1 · Answer 2 · answered Mar 15 '18 at 13:16

1

You need to use document change pattern

$(document).on('change','input#minCost',function(){
  ...
});

answered Mar 15 '18 at 13:16

Ayaz Shah

3,155
7
31
62

How does jQuery().change work with ajax?

2 Answers2