.on("change" not working on partialView

Question

I'm using a

$(".titleField").on("change", function () {
                // change title
                alert("hello");
            });

On a field that I've loaded with ajax call:

<input class="form-control autosize titleField text-box single-line valid" type="text" value="">

But I have no alert that are shown and no error in the console, why? How can i bind the on change on this item loaded in a partial webpage?

When I put the selector in console, it shows me right input...

Thanks in advance

try event delegation - http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Arun P Johny, Mar 20 '15 at 10:46

Sadikhasan · Answer 1 · 2015-03-20T10:52:02.020

2

You need to event delegation with dynamic added element. Check Demo

$(document).on("change keyup",".titleField", function () {
   // change title
    alert("hello");
});

edited Mar 20 '15 at 10:52

answered Mar 20 '15 at 10:46

Sadikhasan

And see the fiddle http://jsfiddle.net/k7bspj4f/ for the behaviour of the change event (it will not fire for each keypress, so no typeahead. Use "keyup" or similar for typeahead stuff). – til_b Mar 20 '15 at 10:54

1 Answers1