使用 on JQuery 事件获取单击的子元素文本

Question

I saw some questions who were similar to mine and even one that is pretty much identical And the answer to that question was to use $(this) for some reason when I use this it executes the $(this) on the document .

var $dropDownItems = $('.notifi-drop').children();
$(document).on('click', $dropDownItems, function(event){

this is the code I am trying to execute. If I do a normal .click() event it works fine and I can use this to get the corrent element. eg

$($dropDownItems).click('click', function(event){

I tried the following (with the on event) but all of them were undefined

console.log($(this).attr('id'))
console.log($(event.target.text))
console.log($(this).text())
    

Just a note: If you didn't see, $dropDownItems is the children of a specific element. I guess that this is the problem in here.

The class and the children of the class:

<div class="dropdown-menu notifi-drop dropdown-menu-right">
                                {% for i in notifications %}
                                    <a class="dropdown-item friend-name-{{username}}">{{i}}</a>
                                    <button type="button" class="btn btn-outline-danger friend-rejected">Reject</button>
                                    <a>⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀</a>
                                    <button type="button" class="btn btn-outline-success friend-accepted">Accept</button>
                                    <hr>
                                {% endfor %}
                            </div>

To clarify even more, I want to detect which child was clicked on and get the child's text.(what I am doing with the click even and this ).

FYI: The reason I want to use the on event is because I am appending data and the click event can't handle it.

Answer 1

When you want to use event delegation, you should be using a selector, not a jQuery object.

So in your case you want to use > * to match the children of the element.

$(document).on('click', '.notifi-drop > *', function(event){