Javascript jQuery on click函数不适用于嵌套元素_Javascript_Jquery_Html_Css

Javascript jQuery on click函数不适用于嵌套元素

javascript jquery html css

Javascript jQuery on click函数不适用于嵌套元素,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我试图通过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.

我试图通过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>

单击处理程序上的选择器与页面上的任何内容都不匹配。如果您只是将其更改为输入，则单击处理程序将激发，但它返回错误的ID。如果您将代码更改为使用$.closest和$.find而不是$.parent，则似乎有效

$body.on'click'，输入，函数事件{ console.log$this.closest'div.colors\u storage\u outer'.find'>select'.attr'data-id' }

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

另外，我会使用带有选择器的最接近的“.colors\u storage\u outer”，这样它会在树上运行并在选择器处停止。您也可以使用“父项”和“父项”。颜色\u存储\u外部”。然后从那里查找select

尝试：

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

尝试：

此代码中没有.colors\u存储输入。@MichaelCoker:代码中有.colors\u存储输入。注意字里行间的空隙。它正在使用“…colors\u storage”查找元素中的输入元素class@Sanchit哪里页面上唯一的.colors\u存储元素是select，输入不能是select@LouysPatriceBessette这就是我的观点。。。select是唯一具有类.colors\u存储的元素，selects中没有输入，因此.colors\u存储输入在页面上不存在。@MichaelCoker:好的，我明白你的意思。。。你说得对。你在这段代码的任何地方都没有.colors\u存储输入。@MichaelCoker:这段代码有.colors\u存储输入。注意字里行间的空隙。它正在使用“…colors\u storage”查找元素中的输入元素class@Sanchit哪里页面上唯一的.colors\u存储元素是select，输入不能是select@LouysPatriceBessette这就是我的观点。。。select是唯一具有类.colors\u存储的元素，selects中没有输入，因此.colors\u存储输入在页面上不存在。@MichaelCoker:好的，我明白你的意思。。。你说得对。谢谢你，工作很有魅力。你能指出为什么我的选择器给了错误的ID吗？@Adamnick$event.target.parents.find'.colors\u storage\u outer>select'将为你的示例返回2个元素。然后，当您调用.attr'data-id'时，它将返回第一个元素的属性值。谢谢，工作非常顺利。你能指出为什么我的选择器给了错误的ID吗？@Adamnick$event.target.parents.find'.colors\u storage\u outer>select'将为你的示例返回2个元素。然后，当您调用.attr'data-id'时，它会返回第一个元素的属性值。您能指出我的选择器给出错误id的原因吗？@Adamnick您调用的是$.parents，它将选择所有父项，然后使用$.find查找选择项-它将返回所有选择项。如果您将行更改为该行，这样它将只找到您单击的console.log$event.target.parents'div.colors\u storage\u outer'.find'>select'.attr'data-id'的.colors\u storage\u outer父项，这将起作用@Adamnick但是$.closest可能是您想要使用的，它不会返回多个项目。您能指出为什么我的选择器提供了错误的ID吗？@Adamnick您正在调用$.parents，它将选择所有父项，然后使用$.find查找选择项-它将返回所有选择项。如果你把你的线路改成这个，这样它就可以打开了 ly查找您单击的console.log$event.target.parents'div.colors\u storage\u outer'.find'>select'.attr'data-id'的输入的.colors\u storage\u outer父项@Adamnick但是$.closest可能是您想要使用的，它不会返回多个项目。

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