javascript - How to find dynamically added element by data attribute using jQuery? - Stack Overflow

admin管理员组

文章数量:1356869

There is an element to which is dynamically applied data attribute like this

var tr = $('<tr>');
tr.data('template_id', 5);
table.find('tbody').append(tr);

Here we have our tr on the table.
...
Here we want to find our newly added tr by data attribute

var tr = table.find('[data-template_id="5"]');
console.log(tr) // tr.length = 0;

Unfortunately, we have no found tr this way.
Why it is getting this result?

There is an element to which is dynamically applied data attribute like this

var tr = $('<tr>');
tr.data('template_id', 5);
table.find('tbody').append(tr);

Here we have our tr on the table.
...
Here we want to find our newly added tr by data attribute

var tr = table.find('[data-template_id="5"]');
console.log(tr) // tr.length = 0;

Unfortunately, we have no found tr this way.
Why it is getting this result?

• javascript
• jquery
• html

Share Improve this question Follow asked Jul 14, 2015 at 8:55 abdulmanov.ilmirabdulmanov.ilmir 1,37544 gold badges1515 silver badges2424 bronze badges 2

• What is table in your first code snip? I think you need $('table') – Patel Commented Jul 14, 2015 at 8:57
• Yes. var table = $('table'); – abdulmanov.ilmir Commented Jul 14, 2015 at 8:59

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 11

The issue you have is that data-* attributes added via jQuery are stored in its internal cache. They are not available as attributes in the DOM. With that in mind, you can use filter() to achieve what you require:

var $tr = table.find('tr').filter(function() {
    return $(this).data('template_id') == 5;
});
console.log($tr.length);

Try tr.attr("data-template_id", 5) instead of tr.data('template_id', 5).

I think you can use

tr.attr('template_id', 5);

本文标签： javascriptHow to find dynamically added element by data attribute using jQueryStack Overflow