如何使用 jQuery 处理 2 次不同的 div 点击并从属性数据中获取值？

Posted 2023-05-07

【中文标题】如何使用 jQuery 处理 2 次不同的 div 点击并从属性数据中获取值？

【英文标题】：How to handle 2 different div clicks and get value from attribute data using jQuery?

【发布时间】：2021-11-25 11:08:33

【问题描述】：

我有一个自动完成功能。当我单击其中一个列表时，它将影响下拉列表的禁用/启用条件。

其结构如下。我有 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>

【问题讨论】：

每次点击select-ac 中的任何内容时，您都会为table-autocomplete-value 分配一个点击处理程序——这不是您想要的

你没有包含自动完成代码和插件（来自cdn）

那么怎么样？我在#select-ac 处理程序之外做了它也不起作用

请提供minimal reproducible example 并改进解释。目前尚不清楚您的预期结果是什么

如果我从 cdn 添加 htmx 我会遇到语法错误

【参考方案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>

【参考方案2】：

.on('click') 事件监听器将为所有具有相同 class 变量的标签注册。

$(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>