在JavaScript中添加onclick事件以添加新元素

我一直在尝试将onclick事件添加到使用JavaScript添加的新元素。在JavaScript中添加onclick事件以添加新元素

问题是当我检查document.body.innerHTML我实际上可以看到onclick = alert（'blah'）被添加到新元素。

但是，当我点击该元素，我没有看到警告框正在工作。事实上涉及到JavaScript的东西不工作..

这里是我用它来添加新的元素：

function add_img() { 
    var elemm = document.createElement('rvml:image'); 
    elemm.src = 'blah.png'; 
    elemm.className = 'rvml'; 
    elemm.onclick = "alert('blah')"; 
    document.body.appendChild(elemm); 
    elemm.id = "gogo"; 
    elemm.style.position='absolute'; 
    elemm.style.width=55; 
    elemm.style.height=55; 
    elemm.style.top=200; 
    elemm.style.left=300; 
    elemm.style.rotation=200; 
}

这是我如何调用该函数：

<button onclick=add_img()>add image</button>

现在图像完美地在浏览器内部绘制。但是当我点击图片时，我没有那么警觉。

来源

2010-07-23 SolidSnake

哦，jQuery的美丽。也许这会对未来有所帮助:) $（'。rvml'）。live（'click'，function（）{alert（1）;}）; – 2010-07-23 07:45:41

.onclick应该设置为函数而不是字符串。尝试

elemm.onclick = function() { alert('blah'); };

改为。

来源

2010-07-23 07:42:06 kennytm

完美谢谢:) – SolidSnake 2010-07-23 07:45:50

这是否适用于IE8？ – human 2016-12-01 01:56:11

@human我很确定它可以一直回到IE4。 – kennytm 2016-12-01 03:21:40

不知道，但尝试：

elemm.addEventListener('click', function(){ alert('blah');}, false);

来源

2010-07-23 07:42:55

即使使用'.addEventListener'，第二个参数仍然需要是一个函数而不是字符串。 – kennytm 2010-07-23 07:46:51

使用jQuery我不记得这一个;）谢谢 – 2010-07-23 07:52:00

这不会在IE8中工作：http://caniuse.com/#search=addEventListener – 2015-12-31 09:39:52

无法通过字符串指定的事件。使用：

elemm.onclick = function（）{alert（'blah'）; };

来源

2010-07-23 07:43:41 MinhNguyen

简短的回答：你要设置的处理程序函数：

elemm.onclick = function() { alert('blah'); };

稍长的答案：你必须写代码的几行，以获取跨浏览器的一致性。

事实上，即使是可能通过一组常见浏览器解决特定问题的细长代码仍然会带来问题。所以如果你不关心跨浏览器的支持，那就用完全短的支持吧。如果你关心它，并且绝对只想得到这个单一的东西，那么结合使用addEventListener和attachEvent。如果您希望能够在整个代码中广泛地创建对象并添加和删除事件侦听器，并希望在浏览器中工作，那么您一定要将该责任委派给诸如jQuery之类的库。

来源

2010-07-23 07:44:15

我只需要这个Internet Explorer .. 短的一个像魅力一样工作。感谢您的详细解决方案，虽然 – SolidSnake 2010-07-23 07:59:29

我不认为你可以这样做。您应该使用：

void addEventListener( 
    in DOMString type, 
    in EventListener listener, 
    in boolean useCapture 
);

文档right here。

来源

2010-07-23 07:44:52

你有三个不同的问题。首先，应该引用HTML标记中的值！不这样做可能会混淆浏览器，并可能导致一些麻烦（尽管在这里可能不是这种情况）。其次，您应该像其他人所说的那样，将一个函数实际分配给onclick变量。这不仅是继续前进的正确方法，而且如果您尝试在onclick函数中使用局部变量，它会使事情变得更加简单。最后，您可以尝试addEventListener或jQuery，jQuery具有更好的界面。

哦，并确保您的HTML验证！这可能是一个问题。

来源

2010-07-23 07:51:41 crazy2be

我在本地使用。所以它不会成为我的问题.. 关于jQuery我不喜欢，因为我无法控制一切，它只是混乱了很多的代码，它会影响其他JavaScript库。我宁愿建立我自己的库，而不是浪费时间来弄清楚如何使用jQuery。感谢您的帮助，虽然:) – SolidSnake 2010-07-23 08:08:30

-1

如果你不想写出你曾经写过的函数中所有你写过的函数。请使用下面的代码，使用jQuery：

$（element）.on（'click'，function（）{add_img（）;}）;

来源

2015-12-17 07:29:24 Prateek

在JavaScript中添加onclick事件以添加新元素

回答

相关问题