Getting Dynamic Added Elements with jQuery

When working with dynamically added elements in jQuery, you need to understand event delegation and proper selection techniques since these elements aren’t present in the DOM when the page first loads.

Understanding the Problem

Standard jQuery selectors like $('.some-class') only work for elements that exist when the page loads. For elements added later (via AJAX, JavaScript, etc.), you need different approaches.

Solution 1: Event Delegation

The most reliable method is to use event delegation with .on():

// For static parent element (document is always available)
$(document).on('click', '.dynamic-element', function() {
// Get text of the clicked element
var text = $(this).text();
console.log('Text:', text);
// Get value if it's an input/select
var value = $(this).val();
console.log('Value:', value);
});

// For static parent element (document is always available)

$(document).on('click', '.dynamic-element', function() {

// Get text of the clicked element

var text = $(this).text();

console.log('Text:', text);

// Get value if it's an input/select

var value = $(this).val();

console.log('Value:', value);

});

Solution 2: Re-query After Addition

If you need to work with the element immediately after adding it:

// Add element dynamically
$('#container').append('<button class="dynamic-btn">Click me</button>');
// Now select it
var newBtn = $('#container').find('.dynamic-btn').last();
console.log(newBtn.text());

// Add element dynamically

$('#container').append('<button class="dynamic-btn">Click me</button>');

// Now select it

var newBtn = $('#container').find('.dynamic-btn').last();

console.log(newBtn.text());

Practical Examples

Example 1: Dynamic List Items

<ul id="itemList">
<!-- Items will be added dynamically -->
</ul>
<button id="addItem">Add Item</button>

</ul>

// Add items dynamically
$('#addItem').click(function() {
var itemNumber = $('#itemList li').length + 1;
$('#itemList').append('<li class="list-item">Item ' + itemNumber + '</li>');
});
// Handle click on any list item (existing or future)
$(document).on('click', '.list-item', function() {
alert('You clicked: ' + $(this).text());
});

// Add items dynamically

$('#addItem').click(function() {

var itemNumber = $('#itemList li').length + 1;

$('#itemList').append('<li class="list-item">Item ' + itemNumber + '</li>');

});

// Handle click on any list item (existing or future)

$(document).on('click', '.list-item', function() {

alert('You clicked: ' + $(this).text());

});

Example 2: Dynamic Form Fields

<form id="userForm">
<div id="fieldsContainer">
<input type="text" class="name-field" placeholder="Enter name">
</div>
<button type="button" id="addField">Add Another Field</button>
</form>

</div>

<button type="button" id="addField">Add Another Field</button>

</form>

// Add new field
$('#addField').click(function() {
$('#fieldsContainer').append('<input type="text" class="name-field" placeholder="Enter name">');
});
// Get all values when form submits
$('#userForm').submit(function(e) {
e.preventDefault();
var values = [];
$('.name-field').each(function() {
values.push($(this).val());
});
console.log('All values:', values);
});

// Add new field

$('#addField').click(function() {

$('#fieldsContainer').append('<input type="text" class="name-field" placeholder="Enter name">');

});

// Get all values when form submits

$('#userForm').submit(function(e) {

e.preventDefault();

var values = [];

$('.name-field').each(function() {

values.push($(this).val());

});

console.log('All values:', values);

});

Example 3: Dynamically Loaded Content via AJAX

// Load content via AJAX
$('#loadContent').click(function() {
$.get('/some/url', function(data) {
$('#contentArea').html(data);
});
});
// Handle elements in the AJAX-loaded content
$(document).on('click', '.ajax-loaded-item', function() {
console.log('Clicked item value:', $(this).data('value'));
});

// Load content via AJAX

$('#loadContent').click(function() {

$.get('/some/url', function(data) {

$('#contentArea').html(data);

});

// Handle elements in the AJAX-loaded content

$(document).on('click', '.ajax-loaded-item', function() {

console.log('Clicked item value:', $(this).data('value'));

});

Best Practices

Use the closest static parent: Instead of document, use the closest static container for better performance:

XHTML

$('#staticContainer').on('click', '.dynamic-element', handler);

1

$('#staticContainer').on('click', '.dynamic-element', handler);
Check existence before working with elements:

JavaScript

if ($('.dynamic-element').length) { // Elements exist }

1
2
3

if ($('.dynamic-element').length) {
// Elements exist
}

Common Pitfalls

Trying to bind events directly to dynamic elements:

JavaScript

// This won't work for dynamic elements $('.dynamic-element').click(function() { ... });

1
2

// This won't work for dynamic elements
$('.dynamic-element').click(function() { ... });

Advanced Techniques

MutationObserver for Complex Cases

When you need to detect when elements are added without explicit events:

// Select the target node
var target = document.getElementById('some-id');
// Create an observer instance
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.addedNodes.length) {
// New nodes added
$('.dynamic-element').last().doSomething();
}
});
});
// Configuration of the observer:
var config = { childList: true, subtree: true };
// Pass in the target node, as well as the observer options
observer.observe(target, config);

// Select the target node

var target = document.getElementById('some-id');

// Create an observer instance

var observer = new MutationObserver(function(mutations) {

mutations.forEach(function(mutation) {

if (mutation.addedNodes.length) {

// New nodes added

$('.dynamic-element').last().doSomething();

}

});

// Configuration of the observer:

var config = { childList: true, subtree: true };

// Pass in the target node, as well as the observer options

observer.observe(target, config);

jQuery Tutorial