Übergabe eines Objekts zur Laufzeit an eine JavaScript-Funktion

Question

Zur Laufzeit habe ich Javascript erstellen HTML und ich möchte ein Objekt auf ihnen binden, um für später auf eine Funktion übergeben.

Etwas wie folgt aus:

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

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

Es scheint dies zu tun macht [object object] die Zeichenfolge p werden anstelle des tatsächlichen Projektobjekt und mit JQuery integrierten in $ .click Funktion ist die gleiche Sache. Ich weiß, dass ich diese Elemente irgendwie zur Laufzeit an eine Funktion binden muss.

Was ist der richtige Weg, um so etwas ohne übermäßige Suche und DOM-Zugriff zu tun?

Answer 1

Sie können Ihren Inhalt erstellen und den Click-Handler mit JavaScript anstelle von Inline-HTML-Handlern einrichten.

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>

Beachten Sie, dass eine bessere Alternative (weil Sie nur einen einzigen Handler benötigen und Sie müssen sich keine Sorgen darüber Handler später hinzugefügt) einen Handler für das übergeordnete gesetzt wäre und Sie könnte ein data-pid-Attribut für jedes div verwenden, das es Ihrem Handler ermöglicht, das richtige Projekt zu finden, basierend auf welchem ​​div geklickt wurde.

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