Question

我的意图如下：我有一个歌曲列表，每首歌旁边都有一个删除链接。有时，如果歌曲不存在或被删除，则列表会呈现添加按钮。当我用户点击添加链接时，会添加一首歌并且会出现“成功添加歌曲”消息，当用户成功删除一首歌时会发生类似的事情。问题在于，当用户首先删除一首歌时，他想要添加一首歌，当他删除一首歌时出现相同的消息，反之亦然，当用户第一次添加歌曲“歌曲被成功添加”时poppes out然后当他点击删除歌曲时“歌曲成功添加”msg上传而不是“歌曲被成功删除”。我认为它与正确的绑定和解除绑定事件处理程序有关，但不确定如何解决这种奇怪的情况。

这是我的jquery点击添加歌曲功能：

 $(document).on("click", ".btnAddCurrentFav", function () {
        var txtLink = $('#youTubeLinkTxt').val();
        var txtName = $('#youTubeNameTxt').val();
        var subLink = txtLink.substr(31); //.replace(/.*\?v=/, '');
        var id = $(this).parent().index() + 1;
        $('#hiddenRank').val(id);

        $.ajax({
            url: "/Home/AddCurrentFav",
            type: "POST",
            data: $("#AddTopTenFavForm").serialize(),
            success: ShowMsg("Song Added Successfully"),
            error: ShowMsg("Song could not be added, please try again")
        });

        $(this).replaceWith('<a name="' + subLink + '" class="topTenFavLinks"  href="#" >' + txtName + '</a>');

        $('#youTubeLinkTxt').val('');
        $('#youTubeNameTxt').val('');
    });

这是我的ShowMsg功能：

  function ShowMsg(parameter) {
    $("#msg").find("span").replaceWith(parameter);
    $("#msg").css("display", "inline");
    $("#msg").fadeOut(3000);
 }

这是我的jquery点击删除歌曲功能：

  $(".btnDeleteCurrentFavSong").click(function () {
    var button = $(this);
    var songId = $(this).attr('name');

    $.ajax({
        type: 'POST',
        url: "/Home/DeleteCurrentFav/",
        data: { id: songId },
        success: ShowSuccessMsgAndReplaceCurrentSong("Song deleted successfully",button),
        error: ShowMsg("Song could not be deleted, please try again"),
    });
});

以下是删除操作的showsuccess函数：

 function ShowSuccessMsgAndReplaceCurrentSong(parameter,button) {
    $(button).siblings().replaceWith('<a class="btnAddCurrentFav icons">+</a>');
    $(button).remove();
    $("#msg").find("span").replaceWith(parameter);
    $("#msg").css("display", "inline");

    $("#msg").fadeOut(3000);
}

Answer 1

您正在立即执行您的成功功能，而不是将其设置为事件处理程序。

success: ShowMsg("Song Added Successfully"), // This executes the ShowMsg function, it does not set it as an event handler.

将其包装在匿名函数中。

$.ajax({
    type: 'POST',
    url: "/Home/DeleteCurrentFav/",
    data: { id: songId },
    success: function () { ShowSuccessMsgAndReplaceCurrentSong("Song deleted successfully",button); },
    error: function () { ShowMsg("Song could not be deleted, please try again"); } //, remove this comma!
});

在发布的代码中的error属性之后还有一个额外的逗号。

Answer 2

我认为问题可能来自这一行：

$("#msg").find("span").replaceWith(parameter);

.replaceWith()用作为参数提供的其他元素替换元素，它不会更改范围内的文本，它会用文本替换范围！

所以下一次，$（“＃msg”）。find（“span”）不起作用，只有#msg元素被淡化，所以你看到了上一条消息。

而是这样做：

$("#msg").find("span").text(parameter);

这个jsfiddle是问题的实例 other one看到了更正。

动态ajax成功财产。非常奇怪

2 个答案: