Question

I have hundreds of

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

which a few are already in the DOM when the page is loaded and others are added dynamically through javascript.

When someone clicks on the button, the value inside the div class=”c” inside of the button should be heightened by 1.

I thought I could do that like this

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

but that does only work on the elements that are loaded on pageload and not on the new per-JS-inserted ones.

I can’t find what I’m missing and would appreciate any hint.

Thanks!
Raphael

Answer 1

You are missing a few concepts of using .on() as a delegate:

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

});

// like-wise to "unbind" using the new methodology
// you would use .off()
$(' --CONTEXT-- ').off('click', '-- YOUR ELEMENT --');

So to put it in example form:

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

But of course this makes the context (or where it will be “bubbling up towards”) document which is too high up. Try using a large parent surrounding wherever this item may appear, it will speed up performance.

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