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
        }
    }); 
});

这段代码有两个问题：

点击.item3次后弹出窗口
jQuery ajax 不会成功，它在控制台上显示 400 Bad Request 错误。

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

有什么想法吗？

Answer 1

a) 确保你的 url 是正确的， 1）更新您的服务器端功能，不接受任何仅用于测试的参数 2) 使用数据调用 ajax：NULL 3) 调试看是否到达服务端功能

b) 如果未到达服务器端，请检查它是否是服务器端函数中的 POST 或 GET。 c) 如果你确定服务器端函数被正确调用，没有stringfy的数据。

可能会有帮助。

Answer 2

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

jQuery ajax 不适用于生成的标记

jQuery ajax doesn't work with generated markup

javascript

jquery

bootstrap-popover