Javascript: событие не запускается, если элемент не добавлен к document.body - PullRequest
Новая
       11

Javascript: событие не запускается, если элемент не добавлен к document.body

0 голосов
/ 18 декабря 2008

Я динамически создаю элемент (div) в javascript, на котором я регистрирую прослушиватель событий: 

var tooltip = document.createElement('div');
tooltip.onclick = function() { alert('hello'); }

Теперь, если я прикреплю этот элемент к телу документа: 

document.body.appendChild(tooltip);

все хорошо, и событие захвачено. Однако (для целей позиционирования) я хочу прикрепить этот элемент к (статическому) подэлементу на моей странице, например: 

document.getElementById('id').appendChild(tooltip);

и элемент генерируется и позиционируется правильно - но событие onclick больше не фиксируется. Какие-нибудь мысли? Это X-браузер, поэтому я должен что-то упустить.

Спасибо, Дон.

Ответы [ 5 ]

1 голос
/ 18 декабря 2008

Вы создаете не только один, но и МНОГИЕ дивы. Попробуйте вместо этого (надеюсь, вы не возражаете, но я также исправил HTML и CSS): 

<html>
<head>

<script type="text/javascript">

function makeDiv() {
    if(!document.getElementById('tooltipDiv')){
        var tooltip = document.createElement('div');

        tooltip.id = "tooltipDiv";
        // Give our tooltip a size and colour so we can see it
        tooltip.style.height = '200px';
        tooltip.style.position = 'absolute';
        tooltip.style.width = '200px';
        tooltip.style.backgroundColor = '#eee';

        // Register onclick listener
        tooltip.onclick = function() { alert('hello'); }
        //tooltip.addEventListener("click", function(){ alert('hello'); }, false);

        // *** Comment one of these out: ***

        //document.body.appendChild(tooltip);
        document.getElementById('myDiv').appendChild(tooltip);
    }
}

</script>
</head>

<body>


<div id="myDiv" 
     onmouseover="makeDiv();" 
     style="position: relative; top: 100px; left: 100px; border: 1px solid red; width: 200px;">

<span>my div text</span>

</div>

</body>
</html>
1 голос
/ 18 декабря 2008

Может быть, вам нужно зарегистрировать обработчик событий после добавления?

0 голосов
/ 29 января 2009

Вот некоторый код для удаления всплывающей подсказки для onmouseout.

Дайте вашему инструменту подсказку при создании: 

toolTip.setAttribute('id','toolTip');

Тогда для onmouseout 

function removeDiv(container) {
    var toolTip = document.getElementById('toolTip');
    document.getElementById(container).removeChild(toolTip);
}
0 голосов
/ 18 декабря 2008

Хорошо, вот мой код, извинения за задержку. Версия с обходным путем размещена под: 

<html>
<head>

<script type="text/javascript">

function makeDiv() {
  var tooltip = document.createElement('div');

  // Give our tooltip a size and colour so we can see it
  tooltip.style.height = '200px';
  tooltip.style.position = 'absolute';
  tooltip.style.width = '200px';
  tooltip.style.backgroundColor = '#eee';

  // Register onclick listener
  tooltip.onclick = function() { alert('hello'); }

  // *** Comment one of these out: ***

  //document.body.appendChild(tooltip);
  document.getElementById('myDiv').appendChild(tooltip);
}

</script>
</head>

<body>


<div id="myDiv" 
     onmouseover="makeDiv();" 
     style="position: relative; top: 100px; left; 100px; border: 1px solid red; width: 200px;">

<span>my div text</span>

</div>

</body>
</html>

=================================== ОК - так это работает: 

<html>
<head>

<script type="text/javascript">

function makeDiv() {
  var tooltip = document.createElement('div');

  // Give our tooltip a size and colour so we can see it
  tooltip.style.height = '200px';
  tooltip.style.position = 'absolute';
  tooltip.style.width = '200px';
  tooltip.style.backgroundColor = '#eee';

  // Register onclick listener
  tooltip.onclick = function() { alert('hello'); }

  // *** Comment one of these out: ***

  //document.body.appendChild(tooltip);
  document.getElementById('container').appendChild(tooltip);
}

</script>
</head>

<body>

<div id="container" style="border: 1px solid blue; float: left; ">
  <div id="myDiv" 
       onmouseover="makeDiv();" 
       style="position: relative; border: 1px solid red; width: 200px;">

       <span>my div text</span>
  </div>
</div>

</body>
</html>
0 голосов
/ 18 декабря 2008

Ваш код отлично работает на Firefox 3.0.5 и IE7. Вы уверены, что ваш пример верен?

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

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

...