"Troubleshooting: Issues with jQuery's .on method when used with dynamically added

Question

"Troubleshooting: Issues with jQuery's .on method when used with dynamically added

I have a large number of

<button class="lb">
  <div class="l"></div>
  <div class="c">2</div>
  <div class="r"></div>
</button>

Some of these buttons are present in the initial DOM when the page loads, while others are dynamically added using JavaScript.

Upon clicking on any button, I want the value inside the "c" div to increase by 1.

I attempted to achieve this with the following code:

$(".lb").on("click", function(event) {
  $('.c', this).html(parseInt($('.c', this).html()) + 1);
  $(this).unbind('mouseout');
});

However, this only works for the elements loaded during pageload and not for those inserted via JavaScript afterward.

I am unable to pinpoint the issue and would appreciate any guidance.

Thank you! Raphael

jquery ajax dynamic

Answer 1

Answer №1

Implement event delegation to the parent of .lb or even to the document itself. As mentioned by @Zolton Toth, make sure to use off instead of the deprecated unbind.

$(document).on("click", ".lb", function(event) {
  $('.c', this).html(parseInt($('.c', this).html()) + 1);
  $(this).off('mouseout');
});

Answer 2

Implement event delegation to the parent of .lb or even to the document itself. As mentioned by @Zolton Toth, make sure to use off instead of the deprecated unbind.

$(document).on("click", ".lb", function(event) {
  $('.c', this).html(parseInt($('.c', this).html()) + 1);
  $(this).off('mouseout');
});

Answer 3

Answer №2

There are a few key points to remember when utilizing the .on() method as a delegate:

$(' --CONTEXT-- ').on('click', ' -- YOUR ELEMENT -- ', function () {

});

// Similarly, to remove this event using the new approach
// you would use .off()
$(' --CONTEXT-- ').off('click', '-- YOUR ELEMENT --');

For example:

$(document).on('click', '.lb', function () { });

However, setting the context to document can be too broad. It is recommended to use a closer parent element that encompasses where this element may appear for better performance.

$('#someParent').on('click', '.lb', function () { });

Answer 4

There are a few key points to remember when utilizing the .on() method as a delegate:

$(' --CONTEXT-- ').on('click', ' -- YOUR ELEMENT -- ', function () {

});

// Similarly, to remove this event using the new approach
// you would use .off()
$(' --CONTEXT-- ').off('click', '-- YOUR ELEMENT --');

For example:

$(document).on('click', '.lb', function () { });

However, setting the context to document can be too broad. It is recommended to use a closer parent element that encompasses where this element may appear for better performance.

$('#someParent').on('click', '.lb', function () { });

"Troubleshooting: Issues with jQuery's .on method when used with dynamically added

Answer №1

Answer №2

Similar questions

Can switching to polling data from a SQL database instead of a file in a chat application lead to improved performance?

Confirm the presence of Cookie and save the data

Cease / Cancel Ajax request without activating an error signal

How can I effectively run and execute JavaScript received from a Node server using Node.js?

If the value is not set for $_POST when sent via an AJAX request

Repeating X and Y Axis Labels on Highcharts

Guide to dynamically insert rows in HTML using Vue.js based on the selected option

"Retrieve data from an Excel file and either present it in a textarea or store it as an array

How do I access additional data when a selection is made in an HTML option selector that has JSON data added?

Using the jQuery AJAX function to modify the URL query string

Using jQuery in CodeIgniter to create a dynamic dropdown list that is dependent

Unable to sign up for WordPress function

Is it possible to return PHP parser errors as JSON data?

Verify the MAC address as the user types

Having trouble storing radio buttons and checkboxes in MySQL database using AJAX

Sending dynamic boolean model property via AJAX dynamically

Stopping errors are a common occurrence in synchronous AJAX

Tips for sending JSON data to the line chart function

After the URL of the window was updated, the local storage was automatically cleared

Is there a way to switch between showing and hiding all images rather than just hiding them one by one?