How to set variable on onclick() function in jquery

Question

I have a dropdown like this ->

<div class="dropdown-item d-flex align-items-center" id="Emp1" onclick="">
  <div class="mr-3">
    <div class="icon-circle bg-success">
      <img class="rounded-circle" src="{% static 'administrator/images/undraw_profile_1.svg' %}" alt="">
    </div>
  </div>
  <div>
    <div class="small text-gray-500">Johanthanc</div>
    <span class="font-weight-bold" id="employee1">Mr. Johanthan Cristofer</span>
  </div>
</div>
<div class="dropdown-item d-flex align-items-center" id="Emp2">
  <div class="mr-3">
    <div class="icon-circle bg-success">
      <img class="rounded-circle" src="{% static 'administrator/images/undraw_profile_1.svg' %}" alt="">
    </div>
  </div>
  <div>
    <div class="small text-gray-500">Johanthanc</div>
    <span class="font-weight-bold" id="employee2">Mr. Johanthan Cristofer</span>
  </div>
</div>

Whenever I click on first div(for say div of id="Emp1"), name of employee should be set in a variable (i.e. div of id="employee1").

<script>

var employee;
jQuery(document).on("click", "#Emp1", function (event) {
  employee = jQuery(this).attr('id') || '';
  console.log(employee);
});

I want to pass the id of its nested division in the 3rd statement of script. So, what should I write to assign a value in employee variable (3rd statement) --> employee = jquery(this).... ???

Ever Dev · Accepted Answer · 2021-02-15 03:24:50Z

1

I think you should add a class or an identifier to identify the elements.

You can just try

  <div class="dropdown-item d-flex align-items-center user-menu-item" id="Emp1" onclick="">

// script
jQuery('.user-menu-item').click(function() {
  employee = jQuery(this).attr('id') || ''
})

or

  <div class="dropdown-item d-flex align-items-center" user-menu-item id="Emp1" onclick="">

// script
// in jQuery
jQuery('[user-menu-item]').click(function() {
  employee = jQuery(this).attr('id') || ''
})

answered Feb 15, 2021 at 3:24

Ever Dev

2,2023 gold badges19 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

D. Seah · Accepted Answer · 2021-02-15 03:25:37Z

1

you can get the id this way.

let employee = null;
jQuery(document).on("click", "#Emp1", function(event) {
  employee = $(this).find('span:first').attr("id");
  console.log(employee);
});

answered Feb 15, 2021 at 3:25

D. Seah

4,7121 gold badge15 silver badges27 bronze badges

Comments

Louys Patrice Bessette · Accepted Answer · 2021-02-15 03:27:55Z

I added two classes:

1. employee for the element on which to attach the event handler
1. fullname for the element holding the wanted information (I assumed the full name here)

I also used .find() method to retreive an element from the event on another one.

I don't think you need to use some id for that purpose.

jQuery(document).on("click", ".employee", function (event) {
  employee = jQuery(this).find(".fullname").text();
  console.log(employee);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown-item d-flex align-items-center employee" id="Emp1">
  <div class="mr-3">
    <div class="icon-circle bg-success">
      <img class="rounded-circle" src="{% static 'administrator/images/undraw_profile_1.svg' %}" alt="">
    </div>
  </div>
  <div>
    <div class="small text-gray-500">Johanthanc</div>
    <span class="font-weight-bold fullname" id="employee1">Mr. Johanthan Cristofer</span>
  </div>
</div>
<div class="dropdown-item d-flex align-items-center employee" id="Emp2">
  <div class="mr-3">
    <div class="icon-circle bg-success">
      <img class="rounded-circle" src="{% static 'administrator/images/undraw_profile_1.svg' %}" alt="">
    </div>
  </div>
  <div>
    <div class="small text-gray-500">John</div>
    <span class="font-weight-bold fullname" id="employee2">Mr. John Doh</span>
  </div>
</div>

Collectives™ on Stack Overflow

How to set variable on onclick() function in jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related