Detect click on the same dynamic and non-dynamic item

Question

When I click on the item, the function changes the class this item so it can be detected by the other function when clicking.

The problem is that when I use the .click, the click is detected normally, but when I click again (already with the class changed), it does not detect this click.

And when I use the .on, doesn’t even work when I click for the first time.

HTML

<div class="options">
     <ul>
         <li><a href="#" class="com-estoque">ativar</a></li>
     </ul>
</div>

I use the function below to open and close the menu where the link is. I believe that what is giving conflict is this stopPropagation() , but I’m not sure. There would be some way around this problem?

JS

$(".options").click(function(e) {
    $(this).find('ul').toggle();

    e.stopPropagation();
});
$(document).on('click', function(e) {
    $('.options ul').hide();
});

$('.pagina-produtos-admin').on('click', '.sem-estoque', function(e) {
    e.preventDefault();

    $(this).parents('.produto').addClass('semestoque');
    $(this).removeClass('sem-estoque').addClass('com-estoque').html('ativar');
});

$('.pagina-produtos-admin').on('click', '.com-estoque', function(e) {
    e.preventDefault();

    $(this).parents('.produto').removeClass('semestoque');
    $(this).removeClass('com-estoque').addClass('sem-estoque').html('marcar como fora de estoque');
});

Answer 1

The second parameter in the method .on jQuery, how you used it is just for this kind of problem. Create listeners event in dynamic elements.

For example:

$('.my-element').on('click', function() {
  alert('Clicado!');
});

// Criamos o elemento de forma dinâmica:
$('<div>', { 'class': 'my-element' }).appendTo('body');

But if we do:

$('body').on('click', '.my-element', function() {
  alert('Clicado!');
});

// Criamos o elemento de forma dinâmica:
$('<div>', { 'class': 'my-element' }).appendTo('body');

The event will normally fire at the click button.
To learn more, see documentation of the method .on.

---

Probably your error occurs because, according to the code sent above, you did not include the jQuery cipher:

('.pagina-produtos-admin').on('click', '.sem-estoque', function(e) {
  // [...]

The correct, then, would be:

$('.pagina-produtos-admin').on('click', '.sem-estoque', function(e) {
  // [...]

Answer 2

I think this is what you want to do: click on the link to switch the class and text without hiding the <ul>. I made a modification to your code to be more precise and lean:

$('.options').click(function(e) {
    $(this).find('ul').toggle();
    e.stopPropagation();
});

$('.options').find('.sem-estoque, .com-estoque').click(function(e) {
    e.preventDefault();
    e.stopPropagation();

   $(this)
   .toggleClass('sem-estoque com-estoque')
   .html( $(this).hasClass("com-estoque") ? 'ativar' : 'marcar como fora de estoque' )
   .parents('.produto')
   .removeClass('semestoque');

});

$(document).on('click', function(e) {
    $('.options ul').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pagina-produtos-admin">
   <div class="options">
        <ul>
            <li><a href="#" class="com-estoque">ativar</a></li>
        </ul>
   </div>
</div>