5

I am trying to create a button using jquery. I use the following code

jquery('<button/>', {type:'button'}).text(name)

However this works in Safari , FF IE8 but not IE7

i tried to use the attr function :

jquery('<button/>').attr('type','button').text(name)

this does not work either.

any ideas what would work? I suppose if I don't assign a type it would default to button but i rather do that

thanks for your help

Improve this question
5
  • Does a <button> need type="button"? Commented May 9, 2010 at 19:55
  • 4
    Actually button defaults to type=submit. Commented May 9, 2010 at 19:56
  • 2
    button does have a type attribute , type=button , type=submit and type=reset Commented May 9, 2010 at 20:02
  • @code poet, to be fair I had to reference the button tag as well. Sure enough, it does take an attribute of type: w3schools.com/tags/tag_button.asp Commented May 9, 2010 at 20:10
  • 1
    Sure enough. I was wrong. Sorry. Commented May 9, 2010 at 20:12

3 Answers 3

Reset to default
5

Try this:

var button = $('<button type="button"/>');

Now, as it happens, the default type for buttons is "button" anyway in IE (7 at least, not sure about standards-mode 8). However the above should work. I just ran into this the other day. IE lets you provide the type right there in the element syntax when creating elements, and it seems that jQuery is pretty much passing its argument straight through to the low-level DOM API here.

Oh, and it works fine in FF and Chrome too.

edit — well what a difference a year makes, eh? I cannot get that mechanism to work for me at all now with jQuery 1.4.4 or jQuery 1.5.x. The good news is that jQuery 1.6 appears to work the way the OP wanted: via setting "type" in a more normal jQuery-like way.

What does seem to work, however, is to directly call ".setAttribute()" on the element. Thus:

var b = $('<button/>'); b[0].setAttribute('type', 'button');

does not throw an exception, and it does set the "type" attribute properly. (That's itself a little bizarre, as Microsoft clearly documents "type" as being read-only.) The change in 1.6 seems to be along the same lines. Formerly, the library did check "type" and would explicitly disallow its being set on elements already in the DOM, but would proceed to try and set it as a simple attribute for an element not in the DOM. Now, the 1.6 code calls ".setAttribute()" to set "type", which (for reasons unknown to me) works fine.

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

5 Comments

It must be something on my end cause i tried that and it still does not work. It seems to me that IE7 , IE8 , FF and Safari have type="button" as the default too...maybe I will just leave it undeclared
No, that's definitely not correct: all the "good" browsers follow the W3C spec, which stipulates that the default type is "submit". (Well that's in "standards mode"; if you're in quirks mode, well (A) I don't know what they do and (B) get out of quirks mode.)
Also, that definitely works in IE. What do you mean, exactly, when you say "it still does not work"? Do you get a Javascript error?
sorry guys, what i ment was that the browser throws back an error about jquery here it is : Message: Object doesn't support this property or method Line: 20 Char: 49 Code: 0 URI: example.com/js/jquery.js it is odd because it points to the jquery file not my script.
That's because the exception happens when jQuery actually tries to set the attribute. Make sure that you don't set the attribute with the jQuery attr() function!
1

Have you tried:

var $btn = $("<button>Button Text</button>");

Then you can append this anywhere in your document. Generally, you can create just about any DOM element using a string literal in this manner.

Improve this answer

4 Comments

that would work no doubt my trouble is with the "type" of the button. as soon as i assign that IE 7 rejects it
You could certainly do this: var $btn = $("<button type='submit'>Button Text</button>");
I tried that too but it did not work. some how , as soon as i introduce the type attribute IE7 does not like....could this be a jquery 1.4 bug?
Interesting. I don't have IE7 to test this on. If it works in other browsers, I doubt the issue is with jQuery though.
-1

I think you want to use this $(':submit')

It finds anything that acts as a submit button. See: http://api.jquery.com/submit-selector/

Improve this answer

1 Comment

A text above is a node creation command, not a DOM selector command. You can append the new node to the DOM.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.