SyntaxError: fehlt] nach Elementliste, wenn Objektparameter an onclick-Funktion übergeben werden

Question

Ich versuche, eine Liste von Objekten zu iterieren und ein Listenelement für jede von ihnen mit einer Schaltfläche zu erstellen. Wenn ich ihnen onclick Funktion hinzufüge. Ich habe diesen Fehler:

SyntaxError: missing ] after element list

Hier ist mein Code:

box_resources.forEach(function(box){ 
    $("#box-resources-list").append('<li><button type="button" class="list-group-item" onclick="showBoxMarker(' + box + ')">' + box.title + '</button></li>'); 
}); 

Jede Idee, oder? Vielen Dank!

Answer 1

Das Problem ist, dass box in eine Zeichenfolge konvertiert wird, wenn Sie solche Elemente erstellen. Zum Beispiel:

var box = { 
 
    x: 10, 
 
    y: 10, 
 
    w: 5, 
 
    h: 3 
 
}; 
 
console.log('onclick="showBoxMarker(' + box + ')"');

Offensichtlich showBoxMarker([object Object]) Aufruf ist nicht gültig Syntax. Stattdessen sollten Sie die Elemente separat erstellen und dann einen Ereignishandler an dieses Element anhängen.

box_resources.forEach(function(box){ 
    var $listItem = $('<li><button type="button" class="list-group-item">' + box.title + '</button></li>'); 

    // Find the button we just made and attach the click handler 
    $listItem.find('button').click(function() { 
     showBoxMarker(box); 
    }); 
    $('#box-resources-list').append($listItem); 
}); 

Arbeitsbeispiel:

var showBoxMarker = function(box) { 
 
    alert(box.title); 
 
} 
 

 
var box_resources = [ 
 
    { title: 'Box A' }, 
 
    { title: 'Box B' }, 
 
    { title: 'Box C' }, 
 
    { title: 'Box D' }, 
 
    { title: 'Box E' } 
 
]; 
 

 
box_resources.forEach(function(box){ 
 
    var $listItem = $('<li><button type="button" class="list-group-item">' + box.title + '</button></li>'); 
 

 
    // Find the button we just made and attach the click handler 
 
    $listItem.find('button').click(function() { 
 
    showBoxMarker(box); 
 
    }); 
 
    $('#box-resources-list').append($listItem); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="box-resources-list"></ul>

Pro-Tipp: In der Regel ist es besser, neue Elemente aus einer Art von Vorlage zu erstellen, anstatt von Strings in JS und erstellen eine Klicken Sie auf den Handler für ein übergeordnetes Element, und verwenden Sie die Ereignisdelegierung, um Klickereignisse für einzelne Elemente zu verarbeiten.

Answer 2

mit JSON.Stringify (Box) können Sie Ihr Problem beheben. br,