unable to find the item that got user input with dynamically created items

Question

Hi there I am encountering the following problem I have 3 div's dynamically loaded by ajax like so:

<div class="item" id="item1">    // Dynamically loaded
    <input>
    <input>
</div>
<div class="item" id="item2">    // Dynamically loaded
    <input>
    <input>
</div>
<div class="item" id="item3">    // Dynamically loaded
    <input>
    <input>
</div>

$(document).on('change', '.item', function() {


});

What I want to achieve is when I make a change on the input of one of the three div's, I wanna know where the input was provided. Because the elements are dynamically loaded I can't use a direct selector but I have to use $(document).on and because I dont make use of the direct selector I can't make use of (this). How do I find out in what item changes have been made?

Thanks in advance!

Maybe try : `$(document).on('change', '.item input', function() {` — Pierre, Jun 03 '16 at 13:58
Still gets the same problem. The function will fire but when using (this) I get the whole page as output — Frank W., Jun 03 '16 at 13:59
But in your callback closure, the `$(this)` corresponds to your changed input — Pierre, Jun 03 '16 at 14:03
It should work fine with `'.item input'` as @Pierre suggested (https://jsfiddle.net/m39zt6ps/) - if not, you are doing something else wrong. — CBroe, Jun 03 '16 at 14:31
I think i misunderstood @Pierre Seems to be working now Thanks! — Frank W., Jun 03 '16 at 14:33

Bozhidar Stoyneff · Accepted Answer · 2016-06-03T14:29:44.333

1

The first argument of the handler - for instance e - would receive the event if it is declared. Then the e argument is having target property which gives you the HTML element on which the event originated. So this would give you a reference to the changed input:

$(document).on('change', '.item', function(e) {
    var targetInput = e.target;
    var parent = $(targetInput).closest("div.item");
    // Do something ...
});

edited Jun 03 '16 at 14:29

answered Jun 03 '16 at 14:24

Bozhidar Stoyneff

3,576
1
18
28

2

If you are using jQuery you can use $(this).closest("div.item") instead of declaring another variable. – Alexander Kludt Jun 03 '16 at 14:31
@AlexanderKludt: It is not the same. `this` gives you an element to which you're listening for the event whereas `.target` gives you the element which caused the event. – Bozhidar Stoyneff Jun 03 '16 at 14:40

score 0 · Answer 2 · answered Jun 03 '16 at 14:08

0

According to your HTML, each div is having different id, Hence you can get the div Id on change of the input. Please test this piece of code and test.

$("input").on('keyup', function(){

   //Get the parent div id,
    var changeDivID = $(this).parents('div').attr("id");
    alert(changeDivID);

});

answered Jun 03 '16 at 14:08

Samir

1,312
1
10
16

Thanks you for your answer, but it doesn't answer the question. Because the 3 div's are loaded by php I can't make use of `$("input").on` but I have to make use of $(document).on – Frank W. Jun 03 '16 at 14:10
@Frank, you want to find out which input has been changed correct? – Samir Jun 03 '16 at 14:18
In your question it is mention "What I want to achieve is when I make a change on the input of one of the three div's, I wanna know where the input was provided". If you run my code, it will give the id of the parent div. Relative to that id you can got to know which input. Hope i am correct. – Samir Jun 03 '16 at 14:20
Only it was that easy :P No I want to find out if input was given to item1, item2 or item 3. But like I sayd the content is loaded dynamically. Check out this post http://stackoverflow.com/questions/15090942/jquery-event-handler-not-working-on-dynamic-content The wayyou use the selector does not work in this case. – Frank W. Jun 03 '16 at 14:22

unable to find the item that got user input with dynamically created items

2 Answers2