Question

My ajax looks like

   // 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 looks like

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

• When I save click on button I get success message as

video saved successfully x(cross mark)

• I click cross and notification is gone now

• When I AGAIN save click on button, nothing happens, I see firebug complaining
  No elements were found with the selector: "#alerts"

• My guess is clicking on cross mark removes the div="alerts" tag entirely from DOM. is it correct?

Question
– How can I get the correct behavior. clicking on cross mark removes notification div, clicking on button to create creates the notification div again

Answer 1

Actually according to this when you click x the plugin removes the div so when you try to select the div again using var alerts = $('#alerts'); after you close it once the div is not present in the dom.

A part of the plugin that is responsible for close/remove an element

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

$.support.transition && $parent.hasClass('fade') ?
  $parent.on($.support.transition.end, removeElement) :
  removeElement()

Try to create a dynamic div each time (with id alerts) and append it to the body where you want to place it, it may work.