jQuery on click function is not working for nested elements

Question

I am trying to get the clicked element's parent's attributes and the elements on which click event should fired are being added dynamically via jQuery. This is my code for click event which is not working at all

$("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'))*/
})

However, this code works but gives only one id 855 no matter which input elem is clicked.

$("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'))*/
})

and this is my html structure.

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

You don't have .colors_storage input anywhere in this code. — Michael Coker
– Michael Coker, Commented Apr 11, 2017 at 20:29
@MichaelCoker: The code does have .colors_storage input. Mind the space between the words. it is looking for the input element inside the element with `..colors_storage' class — Sanchit
– Sanchit, Commented Apr 11, 2017 at 20:31
@Sanchit where? The only .colors_storage element on the page is a select and an input can't be a child of a select — Michael Coker
– Michael Coker, Commented Apr 11, 2017 at 20:32
@LouysPatriceBessette that's my point... the select is the only element with class .colors_storage and there is no input in the selects, so .colors_storage input doesn't exist on the page. — Michael Coker
– Michael Coker, Commented Apr 11, 2017 at 20:43

Michael Coker · Accepted Answer · 2017-04-11 20:34:47Z

2

The selector on your click handler doesn't match anything on the page. If you just change it to input, the click handler fires, but it returns the wrong ID's. Seems to work if you change your code to use $.closest() and $.find() instead of $.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>

answered Apr 11, 2017 at 20:34

Michael Coker

53.8k5 gold badges69 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

StealthTrails Over a year ago

can you please point out why my selector was giving wrong ids?

Michael Coker Over a year ago

@Adamnick you're calling $.parents() which will select all parents, then using $.find() to find the selects - that returns all selects. It would work if you changed your line to this, so that it only finds the .colors_storage_outer parent of the input you clicked console.log($(event.target).parents('div.colors_storage_outer').find('> select').attr('data-id'));

Michael Coker Over a year ago

@Adamnick but $.closest() is probably what you want to use instead, it won't return multiple items.

HoofHarted · Accepted Answer · 2017-04-11 20:35:53Z

2

There are some selectors that are wrong as other's have pointed out.

Also, I would use closest('.colors_storage_outer') with a selector so it goes up the tree and stops at the selector. You can do this with parents too (parents('.colors_storage_outer')). Then look for the select from there.

try:

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

answered Apr 11, 2017 at 20:35

HoofHarted

1762 silver badges5 bronze badges

2 Comments

StealthTrails Over a year ago

thank you, worked like a charm. can you please point out why my selector was giving wrong ids?

HoofHarted Over a year ago

@Adamnick $(event.target).parents().find('.colors_storage_outer > select') will return 2 elements for your example. When you then call .attr('data-id') it returns the attribute value for the first element.

Collectives™ on Stack Overflow

jQuery on click function is not working for nested elements

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related