Как настроить таргетинг на родительский элемент динамически добавляемых элементов HTML с помощью прослушивателя щелчков, если мой приемник щелчков не всплывает?

Question

У меня есть такая функция, которая берет данные из AJAX и передает их в DOM.

function populateProfile(arr) {
let items = ``;

for (let i = 0; i < arr.length; i++) {
    const { title, sport, members, membersLimit, description, _id } = arr[i];
    const { lat, long } = arr[i].location;

    items = items.concat(`
        <div id="${_id}" class="post-item">
            <div class="post-item-list">
                <ul>
                    <li><h4>${title}<h4></li>
                    <li>Sport: ${sport}</li>
                    <li>Max players: ${membersLimit}</li>
                    <li>Current players: ${members}</li>
                    <li> Description: <p>${description}</p></li>
                    <li>${lat},${long}</li>
                </ul>
            </div>
        </div>
    `);
}
$('#ownPosts').append(items);
}

Для этой функции я назначил идентификатор самому первому div, который является контейнером.для всех элементов.

У меня есть следующая функция: прослушиватель событий щелчка, который должен захватить идентификатор нажатого элемента div и передать его viewSinglePost, который является запросом AJAX, чтобы вернуть данные для одного сообщения.и отобразить его в DOM как модальный.

function popPost() {
$('#ownPosts').on('click', '.post-item', (event) => {
    const singlePost = event.target.id
    viewSinglePost(singlePost);
});
}

В настоящее время popPost () будет запускаться только при нажатии ТОЛЬКО на элемент div с классом «post-item».Если я щелкну ul или li или какие-либо дочерние элементы элемента div.post, он не сработает, даже если они находятся в div.

Итак, я спрашиваю, как получить прослушиватель щелчковчтобы зарегистрировать этот щелчок по любому из дочерних элементов div.post-item, элементов grandchild и т. д., он будет обрабатываться так, как если бы он нажал div.post-item?

Заранее благодарен за помощь.

Answer 1

Я не думаю, что это правильный подход к показу поста.В конечном итоге вы будете слушать больше кликов, чем вы хотите.Несколько примеров:

• Где-то глубоко в ваших списках, у вас есть кнопка «Копировать в буфер»
• Или кликабельный якорь

Вы неЯ не хочу иметь дело с этими элементами, щелкающими здесь (т.е. отфильтровывать их), и они не хотят, чтобы их замедляла функция, связанная с показом поста, если они всплывают.Это не очень хорошая ориентация с точки зрения производительности.

Рядом с заголовком h4 каждого сообщения может быть кнопка, отвечающая за отображение сведений о сообщении (я думаю, viewSinglePost() предоставляет эту функцию).Затем вы должны поместить слушателя на эти / эти кнопки (один слушатель для всех кнопок списков сообщений) и точно знать, что предназначается конечным пользователем, когда происходит щелчок.

Answer 2

Если я правильно понял, вы ищете идентификатор родительского div с классом post-item .

Если это ваша проблема, вы можете изменить эту строку:

const singlePost = event.target.id

с:

const singlePost = $(event.target).closest('div.post-item').attr('id')

или, просто js:

const singlePost = event.target.closest('div.post-item').id;

Где:

jQuery.closest () : получить первый элемент, соответствующий селектору, проверив сам элемент и пройдя через его предков в дереве DOM

Фрагмент:

populateProfile([{"title": 1, "sport": 1, "members":1, "membersLimit":1, "description":1, "_id":1,
    "location": {"lat": 1, "long": 1}},
    {"title":2, "sport":2, "members":2, "membersLimit":2, "description":2, "_id":2,
    "location": {"lat": 2, "long": 2}}]);
$('#ownPosts').on('click', '.post-item', function(event) {
    const singlePost = $(event.target).closest('div.post-item').attr('id');
    console.log('---> ' + singlePost);
    //viewSinglePost(singlePost);
});


function populateProfile(arr) {
    let items = ``;

    for (let i = 0; i < arr.length; i++) {
        const { title, sport, members, membersLimit, description, _id } = arr[i];
        const { lat, long } = arr[i].location;

        items = items.concat(`
    <div id="${_id}" class="post-item">
                <div class="post-item-list">
                <ul>
                <li><h4>${title}<h4></li>
                <li>Sport: ${sport}</li>
        <li>Max players: ${membersLimit}</li>
        <li>Current players: ${members}</li>
        <li> Description: <p>${description}</p></li>
        <li>${lat},${long}</li>
        </ul>
        </div>
        </div>
`);
    }
    $('#ownPosts').append(items);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="ownPosts"></div>