How to detect a value change on an element?

Question

I have an input element with default value of '2':

<input type="text" class="chapter" value="2" />

Which displays as follows when using jQuery mobile:

<div class="ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-c">
    <input type="text" class="chapter ui-input-text ui-body-c" value="2">
</div>

I want to do something every time the value is changed by the user, so I say:

$('.chapter').change(function(i, el) { alert("coding is epic"); });

However, as I change the value to '5' and click off the element, nothing happens. Checking out the developer tools shows me that the value is still '2', even though '5' is displayed on the screen.

The wierd thing is that it does work on the following element:

<input id="UploadFile" type="file" name="datafile">

when called for using:

$('#UploadFile').change(function(e){ //aaaaargh! });

How can I do something when this value changes? Also, there are many elements on the page with class="chapter", all of type <input>, and I have attempted using $('.chapter').each().change(function(i, el) {

I don't see any error with your code as it is, so perhaps it's something else on the page. Also, your usage of `.each` is incorrect. — Denis, Oct 03 '13 at 14:25
In the console enter `$(".chapter").val()` and you'll see it has changed. It doesn't change the value attribute, but that's not important. Not sure why your alert wasn't triggered though, unless it's a delegation issue. Is it in a `document.ready` handler? — Reinstate Monica Cellio, Oct 03 '13 at 14:27
your code most likely isn't located in a place where it will get executed after the input has been added to the document. — Kevin B, Oct 03 '13 at 14:27
Yes the code is included in a document.ready handler. I don't understand it either! PS- I guessed usage of .each was incorrect! What about librarian's answer below? — Patrick Keane, Oct 03 '13 at 14:40
@PatrickKeane [this may be helpful](http://stackoverflow.com/questions/14468659/jquery-mobile-document-ready-vs-page-events) — billyonecan, Oct 03 '13 at 14:45
document ready isn't always the way to fix it. It's actually recommended against when it comes to jQuery Mobile. — Kevin B, Oct 03 '13 at 14:49
No, you don't need $.each at all, and the interval from librarian looks irrelevant to me. All you need is a change event, and the only reason it doesn't work is because the input you are interacting with doesn't exist when the event handler is attached. — Kevin B, Oct 03 '13 at 14:50
dont use `.ready()` use jQM events http://api.jquerymobile.com/category/events/ — Omar, Oct 03 '13 at 15:06
Aaaah Kevin! Your a genius! It's not working because the is dynamically loaded on the page, and wasn't there when the document.load function was run. I should change my .change function to .on('change', '.chapterPageFrom', function() — Patrick Keane, Oct 03 '13 at 15:07

score 0 · Answer 1 · answered Oct 03 '13 at 15:10

Kevin B wrote a comment:

the only reason it doesn't work is because the input you are interacting with doesn't exist when the event handler is attached

Your a genius Kevin! It's not working because the <input> is dynamically loaded on the page, and wasn't there when the document.load function was run.

I should change

$('.chapter').change(function(i, el) { #### });

to

$('.container').on('change', '.chapterPageFrom', function() { #### });

EPIC!

How to detect a value change on an element?

1 Answers1