Button tag onclick not working

Question

I try to inject a button in a page and i want to make it clickable but it seems it's not working at all.

$(".something").append('<button style="background-image: \
-webkit-gradient(linear, left bottom, left top, color-stop(0.3, rgb(255,170,0)),\
color-stop(0.85, rgb(222,133,0)) ); height: 28px; padding-top: 5px; \
padding-bottom: 5px; padding-left: 10px; padding-right: 10px; \
border-top-left-radius: 4px; border-top-right-radius: 4px; \
border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;" \
type="button" onclick="alert("lelele");"><span style="color: #fff;">\
Button</span></button>');

I searched the web and i went trying the simplest solution: the alert function and even that is not working.

bipen · Accepted Answer · 2013-04-11 09:41:58Z

3

the problem is with escaping....

onclick="alert(\'lelele\');"

but i prefer using on delegated event

 $(function(){
  $('.something').on('click','button',function(){
     alert('lelele');
  })
 });

this won't require the inline onclick javascript event which is hard to read and debug...

remove onclick="alert("lelele");" from button

edited Apr 11, 2013 at 9:41

answered Apr 11, 2013 at 9:31

bipen

36.6k9 gold badges51 silver badges62 bronze badges

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

4 Comments

xec Over a year ago

+1 This is certainly a better way to go (rather than inline js inside html inside a string inside js, ugh!)

Nicolas Dusart Over a year ago

Escaping will not work with double quotes as it will be unescaped twice (js->html->js). So must be escaped simple quotes. But +1 for the delegate.

Edeph Over a year ago

I don't understand why would i need the $(function(){ and why i don't start directly with $('.something')...

bipen Over a year ago

beacause..$(function(){ is shortcode for $(document).ready(function(){..... keeping script inside this makes sure it is called only after the document and its element is fully loaded...i recommended youto always use this before your script..

xec · Accepted Answer · 2013-04-11 09:42:14Z

1

Your quotes are mismatched, try escaping the inner ones.

onclick="alert(\'lelele\');"

That said, onclick is the old way of doing things, you will get cleaner code avoiding inline JavaScript (like bipen suggests).

$(".something")
    .append('<button class="myClass">Button</button>') // no CSS or inline JavaScript
    .on("click", "button", function() { // delegation syntax
        alert("lalala");
    });

Read more about event delegation syntax here

Also move your styles to a css file! :)

edited Apr 11, 2013 at 9:42

answered Apr 11, 2013 at 9:32

xec

18.1k3 gold badges50 silver badges58 bronze badges

4 Comments

Nicolas Dusart Over a year ago

This won't work, it will be unescaped in html. Should use simple quotes.

Edeph Over a year ago

@Haelty i am confused about your statement, please detail. i keep the css inline because i'm not sure yet how permissions work in the chrome extension with the css, i will look further on and check your answer thank you.

Nicolas Dusart Over a year ago

You have this $("test").append('<button onclick="alert(\"lol\");">button</button>'). What will be appended is '<button onclick="alert("lol");">...', so then onclick will only contain alert( because of the second quote. That's why you have to use simple quote... or double escaping double quotes >_>. Use bipen's solution for clarity of code ;) and there is nothing to do with CSS.

Edeph Over a year ago

Actually this worked very fine! I was not aware of the "escaping" type of issue :)

Nicolas Dusart · Accepted Answer · 2013-04-11 09:31:25Z

0

Use simple quotes in the onclick argument. You have to escape them because you use them as delimiter in your append function.

onclick="alert(\'lelele\');"

answered Apr 11, 2013 at 9:31

Nicolas Dusart

2,03720 silver badges29 bronze badges

Collectives™ on Stack Overflow

Button tag onclick not working

3 Answers 3

4 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related