Reputation: 119
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).... ???
Upvotes: 2
Views: 905
Reputation: 33943
I added two classes:
employee
for the element on which to attach the event handlerfullname
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>
Upvotes: 0
Reputation: 4592
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);
});
Upvotes: 1
Reputation: 2162
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') || ''
})
Upvotes: 1