Question

在运行时，我有Javascript创建html，我想绑定它们上的对象以传递给函数以供日后使用。

这样的事情：

var projects = //(json object)
projects.forEach(function(p) {
   $("#container").append("<div onclick=handleClick(p)></div>");
});

function handleClick(p) {
  //...
}

似乎这样做会使p成为字符串[object object]而不是实际的Project对象，并且使用JQuery内置的$ .click函数是一回事。我知道我必须以某种方式将这些元素绑定到函数中。

在没有过多搜索和DOM访问的情况下，做这样的事情的正确方法是什么？

Answer 1

您可以使用JavaScript而不是内联HTML处理程序创建内容并设置其单击处理程序。

var projects = [{id: 1}, {id:2}, {id:3}];
projects.forEach(function(p) {
   $("#container").append($("<div>Test </div>").click(function(e){
       handleClick(p);
   }));
});

function handleClick(p) {
  console.log('Clicked project', p.id);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
Content here
</div>

请注意，更好的替代方法（因为您只需要一个处理程序，而不必担心以后添加处理程序）将在父级上设置处理程序，并且您可以在每个div上使用data-pid属性这将让你的处理程序根据点击的div找到正确的项目。

$(() => {
  var projects = [{id: 1}, {id: 2}, {id: 3}];
  projects.forEach(function(p) {
    $("#container").append("<div class=clicky data-pid=" + p.id + ">Project " + p.id + " </div>");
  });
  $("#container").click('.clicky', (e) => {
    console.log('Clicked paragraph for ' + $(e.target).data('pid'));
  })

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
  Content
</div>

将运行时的对象传递给javascript函数

1 个答案: