如果我在javascript中创建了元素，当我单击创建的元素时如何调用函数？_Javascript

如果我在javascript中创建了元素，当我单击创建的元素时如何调用函数？

javascript

如果我在javascript中创建了元素，当我单击创建的元素时如何调用函数？,javascript,Javascript,大概是这样的： <html> <head></head> <body> <button onclick="elem()">Create element</button> <script type="text/javascript"> function elem() { var div = document.createElement(

大概是这样的：

<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>


创建元素
函数元素（）{
var div=document.createElement（'div'）；
文件.正文.附件（div）；
div.id='myDiv'；
div.innerHTML='这是用javascript创建的div元素'；
}
var myDiv=document.getElementById（'myDiv'）；
myDiv.onclick=函数（）{
警惕（“你好”）；
}

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

在创建新元素时添加事件处理程序。否则，脚本将在

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 Fiddle:

在创建新元素时添加事件处理程序。否则，脚本将在

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 Fiddle:

您的

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'); 
    });
 }

您的

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'); 
    });
 }

创建元素时，您需要添加单击事件

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");
    }
};

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

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");
    }
};

您最好在

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>


函数元素（）{
var div=document.createElement（'div'）；
文件.正文.附件（div）；
div.id='myDiv'；
div.innerHTML='这是用javascript创建的div元素'；
div.onclick=函数（）{
警惕（“你好”）；
}
}

您的最好在

元素中添加事件，如：
<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>


函数元素（）{
var div=document.createElement（'div'）；
文件.正文.附件（div）；
div.id='myDiv'；
div.innerHTML='这是用javascript创建的div元素'；
div.onclick=函数（）{
警惕（“你好”）；
}
}

你的
MovemyDiv.onclick
insideelem（）
MovemyDiv.onclick
insideelem（）
这里没有jQuery。而且，他已经这样做了：document.body.appendChild（div）这里没有jQuery。而且，他已经这样做了：document.body.appendChild（div）myDiv
为null
。此外，他在elem（）
函数中执行此操作。myDiv
为null
。此外，他在elem（）
函数中执行此操作。他的elem（）
函数通过HTML中的
调用。他的elem（）
函数通过HTML中的
调用。