时间戳

首页 > 解决方案 > 如何在多个动态元素上使用 Jquery .on() 方法？

javascript - 如何在多个动态元素上使用 Jquery .on() 方法？

问题描述

我正在尝试将 .on() 单击方法附加到我动态创建的元素。这些元素中的每个元素都有一个 Bootstrap 弹出框，它充当菜单，其中包含每个元素的选项。弹出框也是动态创建的。

为了使菜单正常工作，我为每个元素分配了一个唯一编号，当单击菜单中的一个选项时，提取该唯一编号作为匹配菜单及其与元素选项的一种方式。这样，当我单击“删除”选项时，它就知道要删除哪个元素。

但是，当我创建多个元素并尝试提取唯一编号时，我只得到第一个元素的编号。

HTML：

<div class="scenario-group" id="scenario-group-0">
<div class="scenario-list" id="scenario-list-0">Egypt</div>
<div style="display:none;" name="0" id="scenario-options-box-0" class="scenario-options-box" scn-box="0">
    <button type="button" id="show-btn" class="scenario-option-btn btn-light" btn-box="0">Show</button>
    <button type="button" id="rename-btn" class="scenario-option-btn btn-light" btn-box="0">Rename</button>
    <button type="button" id="delete-btn" class="scenario-option-btn btn-light" btn-box="0">Delete</button>
</div>
<div>
  <a tabindex="0" role="button" style="left:22px; top:2px;" name="0" class="scenario-btn" id="scenario-options-btn-0" scn-box-btn="0" data-toggle="popover" data-placement="left" data-trigger="focus" data-original-title="" title="">
  <i style="color:#444444;" class="fas fa-caret-down" aria-hidden="true"></i>
  </a>
</div>

<div class="scenario-group" id="scenario-group-1">
<div class="scenario-list" id="scenario-list-1">Nigeria</div>
<div style="display:none;" name="1" id="scenario-options-box-1" class="scenario-options-box" scn-box="1">
    <button type="button" id="show-btn" class="scenario-option-btn btn-light" btn-box="1">Show</button>
    <button type="button" id="rename-btn" class="scenario-option-btn btn-light" btn-box="1">Rename</button>
    <button type="button" id="delete-btn" class="scenario-option-btn btn-light" btn-box="1">Delete</button>
</div>
<div>
  <a tabindex="0" role="button" style="left:22px; top:2px;" name="1" class="scenario-btn" id="scenario-options-btn-1" scn-box-btn="1" data-toggle="popover" data-placement="left" data-trigger="focus" data-original-title="" title="">
  <i style="color:#444444;" class="fas fa-caret-down" aria-hidden="true"></i>
  </a>
</div>

查询：

    $(document).on('click',".scenario-option-btn", function() {

    var btnVal = $(this).text();
    var btnID = $(this).attr("btn-box")
    var scnID = $("#scenario-list-" + btnID + "").text();
    })

btnVal 的返回值是正确的，但是 btnID 的值将始终返回 0，我正在努力寻找原因。

这是将事件处理程序分配给多个动态创建的元素的正确方法吗？

任何帮助，将不胜感激。谢谢！

标签： javascriptjqueryhtmlevent-handling

解决方案

推荐阅读