jQuery <input> element problem with onclick attribute

Question

I want an element with an onclick attribute. When I use jQuery, it doesn't seem to work. Here is my code:

$("h1").append($("<input>", {type: "text", onclick: "alert();"}));

The following code does work:

<input type="text" onclick="alert();"></input>

Works in Chromium 12/Ubuntu 11.04; and works in Firefox 5, if the alert() is alerting something. — David Thomas
– David Thomas, Commented Jul 23, 2011 at 18:45
on this sort of debugging, I always specify alert("click"), because I assumed it needed a string :) — yitwail
– yitwail, Commented Jul 23, 2011 at 18:52
how about append($('<input type="text" onclick="alert();">')); instead? — yitwail
– yitwail, Commented Jul 23, 2011 at 18:56
Yep, that works. But it still puzzles me as to why my first method fails. — Randomblue
– Randomblue, Commented Jul 23, 2011 at 19:00

rabudde · Accepted Answer · 2011-07-23 18:50:23Z

3

Why not:

$("h1").append($("<input>").attr("type","text").click(function(){alert()}));

answered Jul 23, 2011 at 18:50

rabudde

7,7826 gold badges58 silver badges95 bronze badges

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

Comments

zzzzBov · Accepted Answer · 2011-07-23 19:01:50Z

2

you really don't want the onclick attribute, you want to use jQuery's click event. Setting the onclick attribute works in most browsers, but it wouldn't be taking advantage of jQuery's normalized events and cross-browser support.

Also, you're not using the jQuery factory method correctly, the second argument it takes is the context for the selector, or, in the case where you're creating html, the owner document for the element to be created in. You really should spend some time reading through the api.

You can chain most methods in jQuery, so the "jQuery way" of doing what you want is:

$('<input>').attr('type', 'text').click(function(){alert();}).appendTo('h1');

answered Jul 23, 2011 at 19:01

zzzzBov

180k57 gold badges328 silver badges375 bronze badges

2 Comments

zzzzBov Over a year ago

@rabudde, with the exception that i explained why, and that I used a different context for appending the element.

rabudde Over a year ago

@zzzzBov for sure, but the result is the same ;)

Jasper · Accepted Answer · 2011-07-23 18:49:15Z

0

How about something like:

$('h1').append('<input type="text">').find('input').live('click', function () {
    alert('bam');
});

EDIT: Yeah I noticed that David Thomas' comment was correct, just changing the alert to actually output something works fine.

answered Jul 23, 2011 at 18:49

Jasper

76.1k14 gold badges153 silver badges148 bronze badges

Collectives™ on Stack Overflow

jQuery <input> element problem with onclick attribute

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related