I need to get the target of a click event inside a BootStrap 3 dropdown menu. After a lot of googling I found this answer, which seems to be exactly what I need. But e.eventTarget always returns undefined. Below is my code
$(document).on("hide.bs.dropdown", ".name-dropdown", function(e) {
console.log(e.clickEvent.target);
});<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="col-sm-4 text-left customer-name">
<div class="dropdown name-dropdown">
<input class="customer-namefield form-control dropdown-toggle text-box single-line" data-toggle="dropdown" id="Customer_Name" name="Customer.Name" placeholder="Name" type="text" value="test" aria-expanded="true">
<div class="name-menu dropdown-menu" style="">
<table>
<tbody>
<tr class="name-menu-row">
<td>test123</td>
<td></td>
<td></td>
</tr>
<tr class="name-menu-row">
<td>test12</td>
<td></td>
<td></td>
</tr>
<tr class="name-menu-row">
<td>test</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>I will be populating the dropdown via ajax. When the user clicks on one of the <tr> it will autocomplete several input fields at once with the data in that table row.
Also if you can suggest a better way to reach my end goal, I would be open to other ideas.