Question

我试图通过jQuery动态添加clicked元素的父元素和触发click事件的元素。这是我的点击事件的代码，它根本不起作用

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

Answer 1

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

，那么似乎可行

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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'))
})

单击函数上的jQuery不适用于嵌套元素

2 个答案: