ansaurus

Question

Onclick event doesn't work when .append()

Answer 1

A:

This is probably a security feature, possibly related to the fact that IE cannot directly return a function through eval.

As a workaround, you could build a DOM tree using jQuery, then write $("#wrapper").empty.append(tree).

SLaks 2010-02-28 18:17:43

Answer 2

+3 A:

You could use jQuery to create the new div. This would let jQuery handle the click-logic between browsers. I just tested what follows in IE8, and it works:

$("<div>")
  .css({'background-color':'aqua','width':'20px','height':'20px','position':'absolute'})
  .click(function(){ alert("TEST"); })
  .appendTo("#wrapper");

Online Demo: http://jsbin.com/ekumi/edit

Jonathan Sampson 2010-02-28 18:22:24

Answer 3

A:

IE has a problem evaluating dynamically inserted html and their events. I think this is because inline onclick/onmouseover/etc. has to be parsed by the HTML engine on page load and they are not fully parsed when inserting elements through JS. Sometimes it works, and other times it doesn't. It's much better to insert the element first, and then wire an event to it after that:

$("#wrapper").html("<div id=\"newdiv\" style=\"background-color: aqua; width: 20px; height: 20px; position: absolute\"></div>");
$("#newdiv").click("function() { alert("TEXT"); });

Ilya Volodin 2010-02-28 18:26:44

Answer 4

A:

First of all, I'm sorry - in question code must contain .append(...) - and this is not working in IE. I already edited question.

I solve the problem in this way:

$('<div>').append($('#item-of-interest').clone()).remove().html();

But I still don't understand why IE behaves incorrect with append method. =(

2010-02-28 20:29:05

ansaurus

tags:

views:

answers:

Onclick event doesn't work when .append()

related questions