jQuery on click 功能不适用于嵌套元素答案

【问题标题】：jQuery on click function is not working for nested elementsjQuery on click 功能不适用于嵌套元素
【发布时间】：2017-04-12 04:35:53
【问题描述】：

我正在尝试获取单击元素的父级属性，并且正在通过 jQuery 动态添加应触发单击事件的元素。这是我的点击事件代码，根本不工作

$("body").on('click', ".colors_storage input", function (event) {
    console.log($(event.target).parents().find('div.colors_storage_outer > select').attr('data-id'))
    /*console.log(parent.attr('data-id'))
    console.log(parent.attr('name'))*/
})

但是，此代码有效，但无论单击哪个输入元素，都只给出一个 id 855。

$("body").on('click', $(".colors_storage input"), function (event) {
    console.log($(event.target).parents().find('div.colors_storage_outer > select').attr('data-id'))
    /*console.log(parent.attr('data-id'))
    console.log(parent.attr('name'))*/
})

这是我的 html 结构。

<div class="colors_storage_outer">
    <select data-id="855" name="colors[]" multiple="" class="form-control colors_storage bulk-colors select2-hidden-accessible" data-placeholder="Colors" tabindex="-1" aria-hidden="true"></select>
    <span class="select2 select2-container select2-container--default select2-container--above select2-container--focus" dir="ltr" style="width: 121.25px;">
        <span class="selection">
            <span class="select2-selection select2-selection--multiple" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="-1">
                <ul class="select2-selection__rendered">
                    <li class="select2-search select2-search--inline">
                        <input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox" aria-autocomplete="list" placeholder="Colors" style="width: 119.917px;">
                    </li>
                </ul>
            </span>
        </span>
        <span class="dropdown-wrapper" aria-hidden="true"></span>
    </span>
</div>
<div class="colors_storage_outer">
    <select data-id="853" name="colors[]" multiple="" class="form-control colors_storage bulk-colors select2-hidden-accessible" data-placeholder="Colors" tabindex="-1" aria-hidden="true"></select>
    <span class="select2 select2-container select2-container--default select2-container--above select2-container--focus" dir="ltr" style="width: 121.25px;">
        <span class="selection">
            <span class="select2-selection select2-selection--multiple" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="-1">
                <ul class="select2-selection__rendered">
                    <li class="select2-search select2-search--inline">
                        <input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox" aria-autocomplete="list" placeholder="Colors" style="width: 119.917px;">
                    </li>
                </ul>
            </span>
        </span>
        <span class="dropdown-wrapper" aria-hidden="true"></span>
    </span>
</div>

【问题讨论】：

这段代码中没有.colors_storage input。
@MichaelCoker：代码确实有.colors_storage input。注意单词之间的空格。它正在寻找带有`..colors_storage'类的元素内的input元素
@Sanchit 在哪里？页面上唯一的.colors_storage 元素是select，而input 不能是select 的子元素
@LouysPatriceBessette 这就是我的意思... select 是唯一具有.colors_storage 类的元素，并且selects 中没有input，所以.colors_storage input 不存在页面。
@MichaelCoker：好的，我明白你的意思......你说得对。

标签： javascript jquery html css

【解决方案1】：

点击处理程序上的选择器与页面上的任何内容都不匹配。如果您只是将其更改为input，点击处理程序会触发，但它会返回错误的 ID。如果您将代码更改为使用 $.closest() 和 $.find() 而不是 $.parent() 似乎可以工作

$("body").on('click', "input", function (event) {
    console.log($(this).closest('div.colors_storage_outer').find('> select').attr('data-id'))
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="colors_storage_outer">
    <select data-id="855" name="colors[]" multiple="" class="form-control colors_storage bulk-colors select2-hidden-accessible" data-placeholder="Colors" tabindex="-1" aria-hidden="true"></select>
    <span class="select2 select2-container select2-container--default select2-container--above select2-container--focus" dir="ltr" style="width: 121.25px;">
        <span class="selection">
            <span class="select2-selection select2-selection--multiple" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="-1">
                <ul class="select2-selection__rendered">
                    <li class="select2-search select2-search--inline">
                        <input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox" aria-autocomplete="list" placeholder="Colors" style="width: 119.917px;">
                    </li>
                </ul>
            </span>
        </span>
        <span class="dropdown-wrapper" aria-hidden="true"></span>
    </span>
</div>
<div class="colors_storage_outer">
    <select data-id="853" name="colors[]" multiple="" class="form-control colors_storage bulk-colors select2-hidden-accessible" data-placeholder="Colors" tabindex="-1" aria-hidden="true"></select>
    <span class="select2 select2-container select2-container--default select2-container--above select2-container--focus" dir="ltr" style="width: 121.25px;">
        <span class="selection">
            <span class="select2-selection select2-selection--multiple" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="-1">
                <ul class="select2-selection__rendered">
                    <li class="select2-search select2-search--inline">
                        <input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox" aria-autocomplete="list" placeholder="Colors" style="width: 119.917px;">
                    </li>
                </ul>
            </span>
        </span>
        <span class="dropdown-wrapper" aria-hidden="true"></span>
    </span>
</div>

【讨论】：

你能指出为什么我的选择器给出了错误的 ID 吗？
@Adamnick 您正在调用 $.parents()，它将选择所有父母，然后使用 $.find() 查找选择 - 返回所有选择。如果您将您的行更改为此，它将只找到您单击的input 的.colors_storage_outer 父级console.log($(event.target).parents('div.colors_storage_outer').find('> select').attr('data-id'));
@Adamnick 但$.closest() 可能是您想要使用的，它不会返回多个项目。

【解决方案2】：

正如其他人指出的那样，有些选择器是错误的。

另外，我会将closest('.colors_storage_outer') 与选择器一起使用，这样它就会向上爬上树并停在选择器处。你也可以和父母一起做这个（parents('.colors_storage_outer')）。然后从那里寻找选择。

尝试：

$("body").on('click', "input.select2-search__field", function (event) {
    console.log($(this).closest('.colors_storage_outer').find('> select').attr('data-id'))
})

【讨论】：

谢谢你，工作就像一个魅力。你能指出为什么我的选择器给出了错误的 ID 吗？
@Adamnick $(event.target).parents().find('.colors_storage_outer > select') 将为您的示例返回 2 个元素。然后当您调用 .attr('data-id') 时，它会返回第一个元素的属性值。