Question

I’m trying to make a notification area that will show alerts.

return this.each(function() {
  jQuery('<div class="' + o['className'] + '">' + o.msg + ' +
         '<a href="#" onclick="$(this).parent().remove(); dismiss(' + o["id"] + ');">X</a>' + '</div>')
    .appendTo(this);
});

This just takes a message pulled from the database, and shows it to the user. If the user clicks the X then it will call dismiss() which will mark it as being read in the database.

The thing is, if the message itself contains a link to another page or external site, I also want to call dismiss() before the user leaves the page. Is there anyway to alter this javascript to take all a elements (the X and any links that would appear in the message) and change the onclick to call the function?

Answer 1

You can rearrange your code a bit and use .delegate(), like this:

return this.each(function() {
  var id = o["id"];
  jQuery('<div />', { 'class': o['className'], html: o.msg })
   .append('<a href="#">X</a>')
   .delegate('a','click', function() { $(this).parent().remove(); dismiss(id); })
   .appendTo(this);
});

This uses the new jQuery(html,props) added in jQuery 1.4 to make the creation a bit cleaner (and faster! document fragment caching!). What it’s doing is instead of attaching an onclick to the X, it’s listening for a click from any <a> in the div and when it bubbles, it executes the same code as it used to only on the <a href="#">X</a> anchor.