Событие Onclick не работает, когда .append () - PullRequest
Новая
       14

Событие Onclick не работает, когда .append ()

1 голос
/ 28 февраля 2010

Простой пример: у меня есть HTML 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="portal.css" />
        <script type="text/javascript" src="/test/lib.js"></script>
        <script type="text/javascript" src="test.js"></script>
    </head>
    <body onload="init();" class="body">
        <div id="wrapper">
        </div>
    </body>
</html>

тогда я звоню 

$("#wrapper").append(
        "<div onclick=\"alert('TEST')\" style=\"background-color: aqua; width: 20px; height: 20px; position: absolute\">" +
        "</div>"
    );

так появляется маленькое окошко, когда я нажимаю на него в FF или Chrome - появляется окно с предупреждением. Но проблема в том, что в IE8 onclick не работает . Это работает, когда я использую .html("...").

Пожалуйста, помогите мне! =) Спасибо!

Ответы [ 5 ]

3 голосов
/ 28 февраля 2010

Вы можете использовать jQuery для создания нового div. Это позволило бы jQuery обрабатывать клик-логику между браузерами. Я только что проверил то, что следует в IE8, и это работает: 

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

Онлайн демо: http://jsbin.com/ekumi/edit

1 голос
/ 21 декабря 2010

Кажется, что IE8 не может обрабатывать события, объявленные в html-тегах, которые являются пустыми, даже если им дается ненулевое значение через css.

Попробуйте добавить '&nbsp;' в качестве содержимого. У меня это сработало.

0 голосов
/ 28 февраля 2010

Прежде всего, извините - код вопроса должен содержать .append (...) - и это не работает в IE. Я уже редактировал вопрос.

Я решаю проблему следующим образом: 

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

Но я все еще не понимаю, почему IE ведет себя некорректно с методом добавления. = (

0 голосов
/ 28 февраля 2010

В IE возникла проблема с оценкой динамически вставляемых html и их событий. Я думаю, что это потому, что встроенный onclick / onmouseover / etc. должен анализироваться механизмом HTML при загрузке страницы, и они не полностью анализируются при вставке элементов через JS. Иногда это работает, а иногда нет. Гораздо лучше сначала вставить элемент, а затем связать с ним событие: 

$("#wrapper").html("<div id=\"newdiv\" style=\"background-color: aqua; width: 20px; height: 20px; position: absolute\"></div>");
$("#newdiv").click("function() { alert("TEXT"); });
0 голосов
/ 28 февраля 2010

Это, вероятно, функция безопасности, возможно связанная с тем, что IE не может напрямую вернуть функцию через eval.

В качестве обходного пути, вы можете построить дерево DOM с помощью jQuery, а затем написать $("#wrapper").empty.append(tree).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...