Question

这样的事情：

<html>
   <head></head>

   <body>
      <button onclick="elem()">Create element</button>
      <script type="text/javascript">
         function elem() {
            var div = document.createElement('div');
            document.body.appendChild(div);
            div.id = 'myDiv';
            div.innerHTML = 'This is created div element with javascript';
         }

         var myDiv = document.getElementById('myDiv');
         myDiv.onclick = function() {
            alert('Hello');
         }
      </script>
   </body>
</html>

我有问题。当我点击创建的元素时如何调用函数？

Answer 1

您需要在创建元素时添加click事件

function elem() {
    var div = document.createElement('div');
    document.body.appendChild(div);
    div.id = 'myDiv';
    div.innerHTML = 'This is created div element with javascript';
    div.onclick = function() {
       alert('Hello');
    };
}

或者你需要使用一个祖先元素冒泡事件来监听click事件。

document.getElementsByTagName("body")[0].onclick = function (evt) {  //there are better ways to add an event
    evt = evt || window.event;
    var target = evt.target || evt.srcElement;
    if(target.id==="myDiv") {
        alert("hello");
    }
};

Answer 2

创建新元素时添加事件处理程序。否则，脚本将执行并尝试在div附加到DOM之前分配事件处理程序。

     function elem() {
        var div = document.createElement('div');
        document.body.appendChild(div);
        div.id = 'myDiv';
        div.innerHTML = 'This is created div element with javascript';

        div.onclick = function() {
            alert('Hello');
        }
     }

JS小提琴： http://jsfiddle.net/Mve2T/

Answer 3

您的myDiv代码应该存在elem函数中，您也可以使用addEventListener()代替'onclick'来绑定特定事件的处理程序。这样的事情。

function elem() {
    var div = document.createElement('div');
    document.body.appendChild(div);
    div.id = 'myDiv';
    div.innerHTML = 'This is created div element with javascript';

     var myDiv = document.getElementById('myDiv');
        myDiv.addEventListener('click', function (){
        alert('hello'); 
    });
 }

Demo

Answer 4

您最好在elem函数中添加您的活动，例如：

<script type="text/javascript">
     function elem() {
        var div = document.createElement('div');
        document.body.appendChild(div);
        div.id = 'myDiv';
        div.innerHTML = 'This is created div element with javascript';
        div.onclick = function() {
            alert('Hello');
        }
     }
</script>

您的DEMO

如果我在javascript中创建元素以及当我点击创建的元素时如何调用函数？

4 个答案: