将 onclick 事件添加到 JavaScript 中新添加的元素

Question

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

问题是当我检查 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; 
}

这是我如何称呼这个 function：

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

现在图像在浏览器中完美绘制。 但是当我单击图像时，我没有收到该警报。

Answer 1

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

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

反而。

Answer 2

您还可以设置属性：

elem.setAttribute("onclick","alert('blah');");

Answer 3

不确定，但尝试：

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

Answer 4

您不能按字符串分配事件。 使用那个：

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

Answer 5

简短回答：您想将处理程序设置为函数：

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

稍微长一点的答案：你必须多写几行代码才能让它在浏览器中一致地工作。

事实是，即使可能在一组常见浏览器中解决特定问题的稍长代码仍然会带来其自身的问题。 因此，如果您不关心跨浏览器支持，请选择完全简短的支持。 如果您关心它并且绝对只想让这件事起作用，请结合使用addEventListener和attachEvent 。 如果您希望能够在整个代码中广泛地创建对象并添加和删除事件侦听器，并且希望它可以跨浏览器工作，那么您肯定希望将该职责委托给一个库，例如 jQuery。

Answer 6

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

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

文档 就在这里。

Answer 7

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

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

Answer 8

查询：

elemm.attr("onclick", "yourFunction(this)");

或者：

elemm.attr("onclick", "alert('Hi!')");

Answer 9

不能说为什么，但 es5/6 语法不起作用

elem.onclick = (ev) => {console.log(this);}不工作

elem.onclick = function(ev) {console.log(this);}工作

Answer 10

如果您不想在您调用的函数中编写您曾经编写的所有代码。 请使用以下代码，使用 jQuery：

$(element).on('click', function () { add_img(); });