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

Question

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

像这样:

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

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

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

在没有过度搜索和 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>