Detect click on the same dynamic and non-dynamic item

Question

Detect click on the same dynamic and non-dynamic item

Navigation

#1 by (2 votes)
#2 by (2 votes)

0

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

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

And when I use .on , it does not work even when I click 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 causing conflict is this stopPropagation() , but I'm not sure. Would you have some way around this?

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');
});

javascript jquery

asked by anonymous 08.03.2018 / 23:05

2 answers

2

The second parameter in the .on method of jQuery, as you used it, is precisely for this type of problem. Create event listeners on 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 trigger the click button. To learn more, see the method documentation .on .

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

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

The correct one, then, would be:

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

08.03.2018 / 23:26

Autocomplete JQuery 1.9.1 Modify carousel configuration in bootstrap 4 [closed]

score 2 · Accepted Answer

I think this is what you're trying to do: click on the link to switch the class and text without hiding <ul> . I made a modification to your code to get 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><divclass="pagina-produtos-admin">
   <div class="options">
        <ul>
            <li><a href="#" class="com-estoque">ativar</a></li>
        </ul>
   </div>
</div>