如何处理2个不同的div点击，并获得值从属性数据使用jQuery?

Question

我有一个自动补全功能。当我点击其中一个列表时，它会影响下拉菜单的禁用/启用条件。

其结构如下:我有id为#select-ac的div，这是主要触发器。但是我也有一个自动完成列表.table-autocomplete-value的触发器，其中包含一些属性数据。我想当我点击table-autocomplete-value，我将得到属性key的值。但是从我编写的代码中，我没有得到属性键的值.

*但我希望该元素在jQuery的#select-ac中。有人能帮我吗?

$(document).ready(function() {
$('#select-ac').on("click", function (e) {
$('.table-autocomplete-value').on('click', function () {
let currentIndex = $(this).data('key');
console.log('the value is: ' + currentIndex)
})
});
});

.hidden{
display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="value  company-name-form-container" style="margin-left: -10px;">
<div id="select-ac"></div>
<div class="form-group">
<input class="hidden hidden-singleSelectAutoComplete" type="text" name="account-companyName" value="">
<input type="text" class="form-control" id="aciaccountcompanyName" placeholder="Nama Perusahaan" name="account-companyNameUserInput" value="" hx-trigger="keyup change delay:200ms" hx-get="/company-name-ac" hx-vars="'account-userInput':jQuery('#aciaccountcompanyName').val(),'account-inputName':'account-companyName' " hx-target="#acaccountcompanyName">
<div id="acaccountcompanyName" class="">
<table class="table-autocomplete" id="rac55dab6fdf7f344918966039a24093d68">
<tbody>
<tr>
<td class="table-autocomplete-value" tabindex="22" data-key="22" data-industrysize="" data-industrytypeid="" data-letid="">ABADI JAYA PACKING</td>
</tr>
<tr>
<td class="table-autocomplete-value" tabindex="23" data-key="23" data-industrysize="" data-industrytypeid="" data-letid="">ACER STORE</td>
</tr>
<tr>
<td class="table-autocomplete-value" tabindex="24" data-key="24" data-industrysize="" data-industrytypeid="" data-letid="">ADIJAYA BUANA PERKASA</td>
</tr>
<tr>
<td class="table-autocomplete-value" tabindex="25" data-key="25" data-industrysize="" data-industrytypeid="" data-letid="">ADIJAYA TEKNIK</td>
</tr>
<tr>
<td class="table-autocomplete-value" tabindex="26" data-key="26" data-industrysize="" data-industrytypeid="" data-letid="">ADITYA SRIWIJAYA</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

Answer 1

如果你从容器委托并且你的自动完成没有弄乱HTML，那么这个工作

$(function() {
$('.company-name-form-container').on("click", '.table-autocomplete-value', function() {
let currentIndex = $(this).data('key');
console.log('the value is: ' + currentIndex)
});
});

.hidden {
display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="value  company-name-form-container" style="margin-left: -10px;">
<div id="select-ac"></div>
<div class="form-group">
<input class="hidden hidden-singleSelectAutoComplete" type="text" name="account-companyName" value="">
<input type="text" class="form-control" id="aciaccountcompanyName" placeholder="Nama Perusahaan" name="account-companyNameUserInput" value="" hx-trigger="keyup change delay:200ms" hx-get="/company-name-ac" hx-vars="'account-userInput':jQuery('#aciaccountcompanyName').val(),'account-inputName':'account-companyName' "
hx-target="#acaccountcompanyName">
<div id="acaccountcompanyName" class="">
<table class="table-autocomplete" id="rac55dab6fdf7f344918966039a24093d68">
<tbody>
<tr>
<td class="table-autocomplete-value" tabindex="22" data-key="22" data-industrysize="" data-industrytypeid="" data-letid="">ABADI JAYA PACKING</td>
</tr>
<tr>
<td class="table-autocomplete-value" tabindex="23" data-key="23" data-industrysize="" data-industrytypeid="" data-letid="">ACER STORE</td>
</tr>
<tr>
<td class="table-autocomplete-value" tabindex="24" data-key="24" data-industrysize="" data-industrytypeid="" data-letid="">ADIJAYA BUANA PERKASA</td>
</tr>
<tr>
<td class="table-autocomplete-value" tabindex="25" data-key="25" data-industrysize="" data-industrytypeid="" data-letid="">ADIJAYA TEKNIK</td>
</tr>
<tr>
<td class="table-autocomplete-value" tabindex="26" data-key="26" data-industrysize="" data-industrytypeid="" data-letid="">ADITYA SRIWIJAYA</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

Answer 2

.on('click')事件侦听器将为具有相同类的所有可行标记注册变量。

$(function() {
//Register your event handler for each item with the same class
$('.table-autocomplete-value').on("click", function (e) {
//Get the data from the select item
let itemKeyVal = $(this).data('key');
//Return (cancel action) if content is empty
if(!itemKeyVal)
return;
//Only for demo purpose
$('[response-tag]').text(itemKeyVal);
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Only for demo purpose -->
<p style="color:red;" response-tag></p>
<div class="value  company-name-form-container" style="margin-left: -10px;">
<div id="select-ac"></div>
<div class="form-group">
<input class="hidden-singleSelectAutoComplete" type="hidden" name="account-companyName" value="">
<input type="text" class="form-control" id="aciaccountcompanyName" placeholder="Nama Perusahaan" name="account-companyNameUserInput" value="" hx-trigger="keyup change delay:200ms" hx-get="/company-name-ac" hx-vars="'account-userInput':jQuery('#aciaccountcompanyName').val(),'account-inputName':'account-companyName' " hx-target="#acaccountcompanyName">
<div id="acaccountcompanyName" class="">
<table class="table-autocomplete" id="rac55dab6fdf7f344918966039a24093d68">
<tbody>
<tr>
<td class="table-autocomplete-value" tabindex="22" data-key="22" data-industrysize="" data-industrytypeid="" data-letid="">ABADI JAYA PACKING</td>
</tr>
<tr>
<td class="table-autocomplete-value" tabindex="23" data-key="23" data-industrysize="" data-industrytypeid="" data-letid="">ACER STORE</td>
</tr>
<tr>
<td class="table-autocomplete-value" tabindex="24" data-key="24" data-industrysize="" data-industrytypeid="" data-letid="">ADIJAYA BUANA PERKASA</td>
</tr>
<tr>
<td class="table-autocomplete-value" tabindex="25" data-key="25" data-industrysize="" data-industrytypeid="" data-letid="">ADIJAYA TEKNIK</td>
</tr>
<tr>
<td class="table-autocomplete-value" tabindex="26" data-key="26" data-industrysize="" data-industrytypeid="" data-letid="">ADITYA SRIWIJAYA</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>