実行時にオブジェクトをjavascript関数に渡す

Question

実行時に、私はJavaScriptを使ってhtmlを作成し、オブジェクトをバインドして後で関数に渡したいとします。このような

何か：

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

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

これを実行すると、pはjQueryの内蔵$ .click機能は同じものである代わりに、実際のプロジェクトオブジェクトの文字列[object object]となり、使用して作るように思えます。私は、実行時に何らかの形でこれらの要素を関数にバインドする必要があることを知っています。

過度の検索やDOMアクセスなしでこれを行う適切な方法は何ですか？

Answer 1

インラインHTMLハンドラの代わりにJavaScriptを使用してコンテンツを作成し、そのクリックハンドラを設定できます。 （あなたは、単一のハンドラを必要とし、あとでハンドラを追加することを心配する必要はありませんので）より良い代替手段が親にハンドラを設定することで、あなただろうと

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がクリックされたことに基づいて適切なプロジェクトをハンドラーが見つけることができます。あなたが問題になっている要素に対して、オブジェクトを格納するためのjQueryの `.dataの（）`メソッドを使用することができます

$(() => { 
 
    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>