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

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>