如何在JavaScript onclick函数中运行jQuery代码？

Question

Clicking on the "close" anchor does not close the notification.

Below is my code:

function show_notification_on_top(message, type) {  

    content =   "<a class='notify-close' onclick='$(\"#notification-box\").fadeOut(\"slow\");' href='#'>close</a>"+ 
                "<p>"+message+"</p>";                   

    $("#notification-box").fadeIn('slow', function() {
            $("#notification-box").delay(60000).fadeOut('slow');
        });

    $("#notification-box").html( content ); 
}

Answer 1

Don't hardcode onclick events on <a> links, use JQuery click unobtrusive subscriber.

function show_notification_on_top(message, type) {  

    content =           
                "<a class='notify-close' href='#'>close</a>"+
                "<p> message </p>";                   

    $("#notification-box").fadeIn('slow', function() {
            $("#notification-box").delay(60000).fadeOut('slow');
        });

    $("#notification-box").html( content ); 

    $('.notify-close').click(function(){
            $('#notification-box').dequeue();
        });
}

Answer 2

Haven't tried the code, but you want something like this...

function show_notification_on_top(message, type) {                  

    var anc = $('<a>').addClass('notify-close').html('close').click(function() {$('#notification-box').fadeOut();   });

    $("#notification-box").append( anc ).fadeIn('slow', function() {
            $("#notification-box").delay(60000).fadeOut('slow');
    });


}

Answer 3

As it is, this would not work. Couple of things.

First: add the click event into your code, not in the markup you add. This can simplify your code in the function really.

Second: your attempt to animate (fadeOut) will fail due to the previous delay and fadeOut in place. To work this properly, simply dequeue the one you have.

function show_notification_on_top(message, type) {
    content = "<a class='notify-close' href='#'>close</a>" + "<p>" + message + "</p>";
    $("#notification-box").fadeIn('slow').delay(60000).fadeOut('slow');
    $("#notification-box").html(content);
}

$(document).on('click', '.notify-close', function() {
    $('#notification-box').dequeue();
});

Note that the .on('click', adds a live event handler, allowing you to remove the event from the markup.

What the code I wrote does: displays message with close you can activate, if not closed manually, waits 60000 miliseconds, then fades out as defined.

Here is a working example: http://jsfiddle.net/MarkSchultheiss/X6qDJ/

EDIT: Note to OP. IF you are fixed on having to include the event as you have it now, you can change your code to:

content = "<a class='notify-close' onclick='$(\"#notification-box\").dequeue();' href='#'>close</a>" + "<p>" + message + "</p>";

instead of:

content =   "<a class='notify-close' onclick='$(\"#notification-box\").fadeOut(\"slow\");' href='#'>close</a>" + "<p>"+message+"</p>";

Answer 4

Thanks all of you. With your help, I've written this code. Works perfectly fine.

function show_notification_on_top(message) {

    content =       "<a class='notify-close' id='notification_anchor' href='#'>close_button_label</a>"+ 
                    "<p>"+message+"</p>";


    $("#notification-box").fadeIn('slow');

    $("#notification-box").html( content );

    $('#notification_anchor').click(function() {
        $("#notification-box").fadeOut("slow");
    });

    window.setTimeout(function() {
        $("#notification-box").fadeOut('slow');
    }, 6000);
}

Answer 5

Add this:

$(document).ready(function(){
  $(".notify-close").live("click", function(){
    $("#notification-box").fadeOut('slow');
  });
});

and forget about the onclick() event;