javascript - jQuery ajax 不适用于生成的标记

Question

我们的应用程序中有搜索功能，当用户输入内容时，结果将根据过滤器生成并显示在页面上。

这是每次keyup后的动态结果:

htmlResult = `
<li>
    <div>
        <img src='${user.avatar}' width='80' alt='${user.fullName}' />
    </div>
    <a tabindex='0'
        class ='btn2'
        data-html='true'
        data-toggle='popover'
        data-content="<div class='list-group'><a href='#' class='item' data-val1-value='0'>Val1</a></div>">add</a>
</li>
`;

以下是事件处理程序:

$("[data-toggle=popover]").popover();
$(document).on('click', '.btn2', function(event) {
    event.preventDefault();
    $(this).popover({ html: true });
});

$(document).on('click', '.item', function (event) {
    event.preventDefault();
    const value1 = $(this).attr('data-val1-value');

    const params = {
        value1: value1
    };
    $.ajax({
        type: "POST",
        url: endPoint,
        dataType: 'json',
        contentType: 'application/json',
        data: JSON.stringify(params),
        success: (result) => {
            // refresh
        }
    }); 
});

这段代码有两个问题:

• 点击.item 3次后将显示popover
• jQuery ajax 不会成功，它在控制台上显示 400 Bad Request 错误。

PS:此代码适用于未生成的标记。

有什么想法吗？

Answer 1

对于弹出窗口，您必须重新启动附加到 HTML 的所有动态内容。对于 Ajax 400，这是因为 URL 未找到路由路径，请再次检查您对此请求的后端要求。