Question

I’m inserting an input field into the dom via jquery in a situation that is not reproducable unfortunately.

However, when I write inside the input field its’ value won’t change.

Have you have seen this behaviour before? And if so how have you dealt with it?

Just to clarify

There’s no code-example in this question as the error is not reproducable by a simple few lines of code. I would have to include parts of the app which I am not allowed to disclose. Hence I’m asking if people have seen similar behaviour, and where to expect it.

Answer 1

If you mean that the event handler does not execute for dynamically added elements, this may be a classical mistake like

HTML:

<div id="container">
    <div class="box">Box</div>
</div>

JavaScript:

$('.box').on('click', function() {
    alert('box clicked');
});
var newBox$ = $('<div>').addClass('box').html('Box');
$('#container').append(newBox$); // clicks on this box will not be handled.

But if you’ll change that JavaScript a little bit, than the events on dynamically added elements will be handled as you want:

How to change it:

$('#container').on('click', '.box', function() {
    alert('box clicked');
});
var newBox$ = $('<div>').addClass('box').html('Box');
$('#container').append(newBox$); // clicks on this box will be handled.

In this way you’re binding the event handler to container and an appropriate event handler will be called when the event will bubble up.