0

Here's my jQuery code (this is a bookmarklet, so it's all done by using my jQuery script to generate this):

$("#audience").prepend("<div id=\"plugbot-gui\"></div>");
$("#plugbot-gui").css("width", "348px").css("height", "48px").css("background-color", "#0A0A0A").css("opacity", "0.9100000262260437");

$("#plugbot-gui").prepend("<br /><a href=\"#\" id=\"autowoot-btn\">AUTOWOOT</a>");
$("#plugbot-gui").append("<a href=\"#\" id=\"automeh-btn\">AUTOMEH</a>");
$("#plugbot-gui").append("<a href=\"#\" id=\"autoqueue-btn\">AUTOQUEUE</a>");

$("#plugbot-gui a").css("font", "bold 12px arial").css("color", "#fff").css("text-align", "center").css("margin-left", "32px");
$("#plugbot-gui a:first-child").css("margin-left", "0px !important");

Everything appears (the text), and is all exactly where I want it... but when I try to use a click() handler in jQuery by using one of the IDs, e.g. autowoot-btn, it doesn't pick it up. It may also be important to note that, even though they're link tags, the cursor doesn't change when hovering over it.

Thanks!

user1436713
  • 85
  • 2
  • 6
  • Please. no escape orgies. When using a HTML string use single quotes either for the string or inside the string. – ThiefMaster Jun 06 '12 at 06:28

1 Answers1

3
$('#plugbot-gui').on('click', '#autowoot-btn', function() {

});

As your #autowoot-btn append to DOM after page load so you need delegate event handler (aka live).

You need to apply this procedure for all of your element that coming to DOM after page load.

There is another process called .delegate()

It will look like:

$('#plugbot-gui').delegate('#autowoot-btn', 'click', function() {

});

.on() method declaration process for delegate is:

$(container).on(eventName, target, handlerFunction);

What about .live()

It has been deprecated in since jQuery > 1.7

Note

Avoid escape characters

thecodeparadox
  • 86,271
  • 21
  • 138
  • 164
  • Okay, this is great. However, my original problem still remains: the link tag still doesn't work. I included that function, on(), but I'm still encountering the original problem: I can't actually click on the links, they don't seem to be responding at all. Might that be something else? – user1436713 Jun 06 '12 at 06:27
  • Nevermind, it's all fixed! Turns out my host site doesn't like to have links inside div #audience. May have something to do with that it's an HTML5 canvas. I know next to nothing about HTML5, so who knows. Anyways, the rest of your code works beautifully. Thanks for your help! – user1436713 Jun 06 '12 at 06:47