Question

我的ajax看起来像

   // send the data to the server using .ajax() or .post()
    $.ajax({
        type: 'POST',
        url: 'addVideo',
        data: {
            video_title: title,
            playlist_name: playlist,
            url: id
            // csrfmiddlewaretoken: '{{ csrf_token }}',
        },
        done: notify('success', 'video saved successfully'),
        fail: notify('error', 'There were some errors while saving the video. Please try in a while')
    });

notify看起来像

function notify(notify_type, msg) {
    var alerts = $('#alerts');
    alerts.addClass('alert');
    alerts.append('<a class="close" data-dismiss="alert" href="#">×</a>');
    if (notify_type == 'success') {
      alerts.addClass('alerts-success').append(msg).fadeIn('fast');
    }
    if (notify_type == 'failure') {
      alerts.addClass('alerts-error').append(msg).fadeIn('fast');
    }
}

当我保存点击按钮时，我得到了成功消息

视频已成功保存x（十字标记）

我点击十字架，通知现已消失
当我再次点击按钮时，没有任何反应，我看到萤火虫抱怨 No elements were found with the selector: "#alerts"
我的猜测是点击十字标记会完全从DOM中删除div="alerts"标记。这是对的吗？

问题 - 我怎样才能得到正确的行为。单击十字标记将删除通知div，单击按钮创建再次创建通知div

Answer 1

实际上根据this，当您点击x时，插件会移除div，因此当您在关闭div之后再次使用var alerts = $('#alerts');选择div时{1}}中没有{1}}。

插件的一部分，负责关闭/删除元素

dom

尝试每次创建一个动态div（标识为function removeElement() { $parent .trigger('closed') .remove() } $.support.transition && $parent.hasClass('fade') ? $parent.on($.support.transition.end, removeElement) : removeElement()）并将其附加到您要放置它的主体上，它可能会起作用。

Answer 2

正如Sheikh Heera所说，你可以通过改变

来修复插件

function removeElement() {
  $parent
  .trigger('closed')
  .remove()
}

到

function removeElement() {
  $parent
  .trigger('closed')
  .hide()
}

jQuery：alert单击close时删除div标签

2 个答案: