How to run jQuery code in the JavaScript onclick function?

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

I do not know what your use of "type" is, but see my answer for notes on what you have included in your example code. It is not obvious regarding the dequeue() even after documentation review. — Mark Schultheiss
– Mark Schultheiss, Commented Jan 23, 2012 at 15:45

gdoron · Accepted Answer · 2012-01-23 16:15:45Z

2

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

edited Jan 23, 2012 at 16:15

answered Jan 23, 2012 at 14:03

gdoron

151k59 gold badges302 silver badges376 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Mark Schultheiss Over a year ago

I tested using IE8, does not work, to make it work change to use a dequeue ` $('.notify-close').click(function() { $("#notification-box").dequeue(); }); `

gdoron Over a year ago

@MarkSchultheiss. Can you please explain what does it do. The docs on that subject are poor.

Mark Schultheiss Over a year ago

The dequeue would, bascially in this instance, remove the delay(60000) from the queue and restart with the subsequent fadeOut('slow'). Otherwise, the delay remains on the element animation stack.

Mark Schultheiss Over a year ago

See this fiddle for a working example: jsfiddle.net/MarkSchultheiss/WZPBe

Mark Schultheiss Over a year ago

I added some additional notes to my answer to help isolate that might assist with the understanding as well.

|

GordonBy · Accepted Answer · 2012-01-23 14:12:07Z

1

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


}

edited Jan 23, 2012 at 14:12

answered Jan 23, 2012 at 14:03

GordonBy

3,4176 gold badges33 silver badges53 bronze badges

Comments

Mark Schultheiss · Accepted Answer · 2012-01-23 15:38:17Z

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>";

shaikh · Accepted Answer · 2012-01-25 08:06:10Z

1

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

answered Jan 25, 2012 at 8:06

shaikh

1,3954 gold badges16 silver badges31 bronze badges

Comments

Marius Ilie · Accepted Answer · 2012-01-23 14:02:39Z

0

Add this:

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

and forget about the onclick() event;

answered Jan 23, 2012 at 14:02

Marius Ilie

3,3232 gold badges27 silver badges27 bronze badges

Collectives™ on Stack Overflow

How to run jQuery code in the JavaScript onclick function?

5 Answers 5

6 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related