通过 javascript 将函数添加到元素

Question

所以我有一个循环来初始化数组中的元素和属性，并且我已经成功添加了我需要的所有内容，除了一件事，一个函数。有问题的循环如下：

for (const character of result) {

    let image = document.createElement("img");

    image.src = character.src;

    image.setAttribute('data-jval', character.jval);

    image.setAttribute('id', character.id);

    image.setAttribute('class', character.class)

    image.setAttribute('draggable', 'true')

    // the below function isn't being added to the divs

    image.addEventListener('ondragstart', function(event){

        let data = event.target.dataset.jval;

        event.dataTransfer.setData("text", data);

    })

    let wrapper = document.createElement('div');

    wrapper.appendChild(image);

    section.appendChild(wrapper);

  }

我试图添加到我的元素中的功能是：

  function drag(event) {

    let data = event.target.dataset.jval;

    event.dataTransfer.setData("text", data);

  }

在尝试用 JavaScript 创建元素之前，我将它们放在 HTML 中，它们看起来像这样：

<img data-jval="a" id="jval-a" src="./images/あ.png" class="j-char-img" draggable="true"  ondragstart="drag(event)"/>

但是当我用循环重新创建它时，它看起来像这样，缺少 ondragstart="drag(event"

<img src="/images/あ.png" data-jval="i" id="jval-i" class="j-char-img" draggable="true">

如果我的其余代码有用，我也可以发布它。

Answer 1

只需“dragstart”而不是“ondragstart”事件：for (const character of result) {&nbsp; &nbsp; let image = document.createElement("img");&nbsp; &nbsp; image.src = character.src;&nbsp; &nbsp; image.setAttribute('data-jval', character.jval);&nbsp; &nbsp; image.setAttribute('id', character.id);&nbsp; &nbsp; image.setAttribute('class', character.class)&nbsp; &nbsp; image.setAttribute('draggable', 'true')&nbsp; &nbsp; // the below function isn't being added to the divs&nbsp; &nbsp; image.addEventListener('dragstart', drag);&nbsp; &nbsp; let wrapper = document.createElement('div');&nbsp; &nbsp; wrapper.appendChild(image);&nbsp; &nbsp; section.appendChild(wrapper);&nbsp; }&nbsp; function drag(event) {&nbsp; &nbsp; let data = event.target.dataset.jval;&nbsp; &nbsp; event.dataTransfer.setData("text", data);&nbsp; }因此，基本上，当您编写内联事件处理程序时，您可以在事件之前添加前缀on，就像之前将事件处理程序放入标记中一样img。对于任何其他事件也是如此：click => onclicksubmit => onsubmitkeydown => onkeydown

Answer 2

#try to add Semicolon;&nbsp; &nbsp; image.setAttribute('class', character.class);&nbsp; &nbsp; image.setAttribute('draggable', 'true');&nbsp; &nbsp; // the below function isn't being added to the divs&nbsp; &nbsp; image.addEventListener('ondragstart', function(event){&nbsp; &nbsp; &nbsp; &nbsp; let data = event.target.dataset.jval;&nbsp; &nbsp; &nbsp; &nbsp; event.dataTransfer.setData("text", data);&nbsp; &nbsp; });