jQuery - Can not select a dynamic created element

Question

Here is my HTML structure:

<table id="items" class="table table-striped table-bordered table-hover">
    <thead>
        <tr>
            <td> </td>
            <td>Name</td>
            <td>Description</td>
            <td>Location</td>
        </tr>
        <tr>
            <td>
                <button type="button" class="btn btn-default btn-lg">
                    <span class="glyphicon glyphicon-plus"></span>
                </button>
            </td>
            <td><input type="text" id="addName"></td>
            <td><input type="text" id="addDescription"></td>
            <td></td>
        </tr>
    </thead>
    <tbody>
    </tbody>
    <tfoot>
    </tfoot>
</table>

And here is my jQuery code:

function getTable(){
    var args = new Object();
    args.op = "getTable";
    $.post("./service.php", args , function(data)
        {
            var dataObj = JSON.parse(data);
            for(var i = 0; i<dataObj.length; i++){
                $('table#items tbody').append("<tr class=\"items_tr\" id=\"item"+dataObj[i].sn+"\"><td>"+dataObj[i].sn+"</td><td>"+dataObj[i].name+"</td><td>"+dataObj[i].description+"</td><td>"+dataObj[i].belonged+"</td></tr>");
        }
    });
}

getTable();

$('tbody').children("tr").hide();
$("tbody tr").hide();
$("tr.items_tr").hide();

The Last 3 statements do not work at all.
Cannot select created <tr>s.
Why and how can I select them?

$("tr").hide();

This one hides only <tr>s inside <thead>, things that have already been created.

more questions - How about .each() function?
I want to bind a click event on each td tag, and I failed again.. How to iterate all new added <td>s?

Its an async call... need to wait for it to finish before making selections. — Alex_B, Aug 13 '14 at 15:46
http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call — Blazemonger, Aug 13 '14 at 15:47

score 3 · Accepted Answer · edited May 23 '17 at 10:33

3

For the last three statements to work, the elements have to exist. You are executing those methods before the Ajax response was received. Move the calls inside the $.get callback, after you added the elements (i.e. after the loop).

Kind of related (because they explain how async stuff works):

edited May 23 '17 at 10:33

Community

1
1

answered Aug 13 '14 at 15:46

Felix Kling

795,719
175
1,089
1,143

So there is no way to select it except inside the ajax calls? – Jean Y.C. Yang Aug 13 '14 at 15:48
@JeanYang: You can't select what doesn't exist. You could hide an existing *ancestor* of the rows though, which would have a similar effect. – Felix Kling Aug 13 '14 at 15:48
I don't really want to hide it, and I want to do something else on it, like binding a .on() function. I just want to make sure that I can select it. – Jean Y.C. Yang Aug 13 '14 at 15:51
If you want to bind event handlers, you can use event delegation instead, as explained here: http://stackoverflow.com/questions/12829963/events-triggered-by-dynamically-generated-element-are-not-captured-by-event-hand – Felix Kling Aug 13 '14 at 15:52
So I have to write an ancestor (container) for it, and do something on its ancestor? – Jean Y.C. Yang Aug 13 '14 at 15:56
If you are talking about event delegation, you can use any existing ancestor. E.g. `$('#items').on('click', 'tr', function() { ... });`. – Felix Kling Aug 13 '14 at 15:57
OK, and how about selecting its descendants(e.g. td tags)? – Jean Y.C. Yang Aug 13 '14 at 16:00
If you want to target `td`s only, just change the selector to `td`. If you want to select them when the event occurs, inside the event handler `this` refers to the `tr` element and you can do whatever you want with it. – Felix Kling Aug 13 '14 at 16:01
Sorry, I have more questions - how about .each() function? I want to bind a click event on each td tag, and I failed again.. – Jean Y.C. Yang Aug 13 '14 at 16:43
Again, use event delegation. `$('#items').on('click', 'td', function() { ... });` will capture every click on every `td` element. Or bind the handler inside the Ajax callback. – Felix Kling Aug 13 '14 at 16:53

score 0 · Answer 2 · answered Aug 13 '14 at 16:00

If you are trying to hide these elements on an event, add them to an event handler for example:

$(document).ready( function () {
        getTable();

        $(element).on('click', function () {
            $('tbody').children("tr").hide();
            $("tbody tr").hide();
            $("tr.items_tr").hide();
        });
     )};

If you are trying to hide these elements right after call the getTable function then add the 3 functions to the $.post success function

code should look like:

function getTable(){
var args = new Object();
args.op = "getTable";
$.post("./service.php", args , function(data)
    {
        var dataObj = JSON.parse(data);
        for(var i = 0; i<dataObj.length; i++){
            $('table#items tbody').append("<tr class=\"items_tr\" id=\"item"+dataObj[i].sn+"\"><td>"+dataObj[i].sn+"</td><td>"+dataObj[i].name+"</td><td>"+dataObj[i].description+"</td><td>"+dataObj[i].belonged+"</td></tr>");
    }
        $('tbody').children("tr").hide();
        $("tbody tr").hide();
        $("tr.items_tr").hide();
});
}

 getTable();

score 0 · Answer 3 · answered Aug 13 '14 at 16:23

Hi jquery binds events on document.ready if there are elements which are created after document.ready then you need to register those elements for those events using .bind() function of jquery. But be sure first unregister alredy attached elements. using unbind();

Refer bind and unbind functions.

jQuery - Can not select a dynamic created element

3 Answers3