Question 11037 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Function works only for first div – Jquery

I’ve got 2 same divs and function like below. My question is, why this work only with first dedicate__wrapper ?
When I click on the second one, nothing happened, no errors in console.

        $(document).ready(function() {
            $(".dedicate__wrapper").on('click', function() {
                        var el2 = document.querySelector(".dedicate__wrapper");
                        var el3 = document.querySelector(".config_submit");
        
        if (el2.classList.contains('step1')) {
                el3.classList.remove('disable');
              } else {
                      el3.classList.add('disable');
              }
            });
            
        });

<div class="dedicate__wrapper"></div>
<div class="dedicate__wrapper"></div>

I tried to do add another click event, but nothing helps me. Do You have any ideas ?

Tags:

2

Answers


  1. 0

    This specifically refers to the first matching element in the DOM:

    var el2 = document.querySelector(".dedicate__wrapper");

    In this case, if the element you’re looking for is the one you clicked then within the jQuery click handler that’s simply this. For example:

    $(".dedicate__wrapper").on('click', function() {
  var el2 = this;
        
  if (el2.classList.contains('step1')) {
    console.log('if block');
  } else {
    console.log('else block');
  }
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dedicate__wrapper step1">first</div>
<div class="dedicate__wrapper">second</div>

    Or, to make further use of jQuery:

    $(".dedicate__wrapper").on('click', function() {
  if ($(this).hasClass('step1')) {
    console.log('if block');
  } else {
    console.log('else block');
  }
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dedicate__wrapper step1">first</div>
<div class="dedicate__wrapper">second</div>

    If you have additional elements to identify relative to the clicked element, then starting from $(this) you can traverse the DOM to find that specific element relative to the clicked element.

    Login or Signup to reply.
  2. 0

    document.querySelector returns single element, so your conditions are applied to the first found DOM element.
    You will always get first matching el2 and el3

    For half code you are using plain js and for another half you are using jQuery

    I would rewrite with something like this

    $(document).ready(function() {
  $(".dedicate__wrapper").on('click', function() {
    var $el2 = $(this);
    var $el3 = $($(this).find(".config_submit"));//your logic here to find single config_submit

    if ($el2.hasClass('step1')) {
      $el3.removeClass('disable');
    } else {
      $el3.addClass('disable');
    }
  });
});

    pseudo fiddle here: https://jsfiddle.net/nitinjs/528x0syo/17/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search