Question

所以我使用fetch将本地json文件中的元素动态添加到DOM，然后我想为它添加可拖动的属性。这是代码：

function addHeroes() {
  fetch('superheroes.json')
    .then((res) => res.json())
    .then((data) => {
      let output = "";
      data.forEach(function(item) {
        output += `<li>${item.name}</li>`;
      });
      $(".superheroes").append(output);
    })
};

function addDraggables() {
  $(".superheroes li").attr({
    draggable: "true",
    ondragstart: "drag(event)"
  });
};

在操作DOM之后，我无法在无序列表“超级英雄”中的这些列表项中添加任何属性。但是，我可以看到列表项显示在检查器中。

Answer 1

编辑：＆＃34;刷新＆＃34;没有用，试试这个：

＆＃13;

function addHeroes() {
  fetch('superheroes.json')
    .then((res) => res.json())
    .then((data) => {
      data.forEach(function(item) {
        let li = $('<li></li>');
        li.text(item.name);
        li.attr({
         draggable: "true",
         ondragstart: "drag(event)"
        });
        $(".superheroes").append(li);
      });
      
    })
};

＆＃13;

Answer 2

您有很多选择来解决您的问题

一个解决方案是在li元素上使用class属性并使用它来选择元素然后调用方法查看下面的示例或使用任何选择器来选择除 id 选择器之外的元素因为它应该是唯一的

function addHeroes() {
  fetch('superheroes.json')
    .then((res) => res.json())
    .then((data) => {
      let output = "";
      data.forEach(function(item) {
        output += `<li class='drag-item'>${item.name}</li>`;
      });
      $(".superheroes").append(output);
      addDraggables();
    })
};

function addDraggables() {
  $(".drag-item").attr({
    draggable: "true",
    ondragstart: "drag(event)"
  });
};

另一种选择是选择超级英雄列表中的所有元素，并调用方法，如下例所示

function addHeroes() {
  fetch('superheroes.json')
    .then((res) => res.json())
    .then((data) => {
      let output = "";
      data.forEach(function(item) {
        output += `<li class='drag-item'>${item.name}</li>`;
      });
      $(".superheroes").append(output);
      addDraggables();
    })
};

function addDraggables() {
  // select the last element in the list 
  $(".superheroes li").attr({
    draggable: "true",
    ondragstart: "drag(event)"
  });
};

另一个选择是将属性直接放在元素中，如下面的例子

function addHeroes() {
  fetch('superheroes.json')
    .then((res) => res.json())
    .then((data) => {
      let output = "";
      data.forEach(function(item) {
        output += "<li draggable='true' ondragstart ='drag(event)'>${item.name}</li>";
      });
      $(".superheroes").append(output);
    })
};

function addDraggables() {
  $(".superheroes").attr({
    draggable: "true",
    ondragstart: "drag(event)"
  });
};

复制其中任何一个并在您的代码中尝试

如何在将元素动态添加到DOM后向元素添加属性

2 个答案: