Detect changes in an input field in a nested dataTable cell using Jquery/JS

25
February 16, 2019, at 11:40 AM

I have a child dataTable nested in a dataTable. The cells in the child table have input type number fields, I want to detect changes to the field and get the new value. However I am not able to catch the change event.

The input field have a class like such :

<td><input type='number' class='edit_detect' name='input_field' value=1</td>

I detect changes to the field using the class like this :

$(".edit_detect").on('change keyup input', function(event){
    console.log(event);
})

But the function never gets run, i.e. the event is never registered.

What do I seem to be doing wrong ?

Answer 1

As you add element dynamically, you need to bind the event like this:

$('body').on('change keyup input', '.edit_detect', function(event){
    console.log(event);
});

That way you bound the event called direct event. there is also something called delegate event, which doesn’t bind the event to the DOM elements, but it delegates the event from their parent. it’s the responsibility of the parent to execute the event on matching child elements. if new child added to parent, parent will take care of executing the event on it.

I used body as parent here, but it's better to bind the event to first non-dynamic parent.

Answer 2

To be precise on selection use unique identifier using id attribute in input.

<td><input type='number' class='edit_detect' id='input-field' name='input_field' value=1</td>

Using id:

$("#input_field").change(function(event){
    alert($(this).val());
})

Or using attribute name:

$("input[name=input_field]").change(function(event){
        alert($(this).val());
    })
READ ALSO
Google App Script - Stand Alone SpreadsheetApp.getActiveSheet() always return the first sheet

Google App Script - Stand Alone SpreadsheetApp.getActiveSheet() always return the first sheet

SpreadsheetAppgetActiveSheet() will always return the first sheet rather than the active sheet which is most likely a bug in new sheets

24
How assign master node in multi node environment

How assign master node in multi node environment

I am running multi node environmentNodes can communicate through Redis pub/sub channel

47
After i used Django inspectdb to create models.py with chinese character in db, field names become scrambled character

After i used Django inspectdb to create models.py with chinese character in db, field names become scrambled character

My database included a lot of chinese characters in its columnAfter I used "python manage

27
Python histogram delta question ( no graph )

Python histogram delta question ( no graph )

i have a problem in which i have the histogram numbers below

20