javascript 替换 + classid

Question

似乎我遇到了一些问题，我很困惑为什么......

代码:

$(".post-click").click(function()
{
    var classid = $(this).attr('id');
    var postid = $(this).attr('id');
    postid = postid.replace('post-click-id_', '');

    alert("ID: " + classid + " PostID: " + postid);

    $(this).replaceWith('<img SRC="assets/img/refresh.gif" ALT="" id="' + classid + '">');

    $.post("likepost.php", { postid: postid } , function(data)
    {
        $(document).foundationTooltips();

        alert(data);
            $("#" + classid).replaceWith(data);

            var classes = $("#" + classid).attr('class');

            alert(classes);
    });
});

现在，这是做什么的，当您单击它时，它会替换您单击的 ID 的文本。现在，最重要的是我得到了这个:

$(".post-click").click(function()
{

替换后似乎不再调用点击后操作。为了确保我用好的类替换了它，我把 'var classes = ...' 放在那里。它警告点击后类正在替换中。

替换为: 测试";

有什么想法为什么 jQuery 不再调用点击后操作吗？

Answer 1

使用 replaceWith 时，您将替换 DOM 元素及其事件绑定(bind)。

幸运的是，jQuery 提供了 .on，它允许您使用事件委托(delegate)(而不是循环通过新内容重新绑定(bind)事件)。

将其应用于点击后的父节点，然后在参数中指定类。

例如

$(".some-parent-elem").on("click", ".post-click", 
       function (){...do stuff on click...});

它的工作原理是，它监听 .some-parent-elem 上的点击(由于事件冒泡，这意味着当您点击该元素的子元素时它会触发)，然后如果被点击的原始目标元素有点击后的类，它运行该函数。