javascript - 从动态创建的链接动态地将参数传递给 JavaScript

Question

我正在尝试将数组变量传递给我的 JavaScript 方法 captureDetails()。但是，它引发了我的错误

Uncaught SyntaxError: Unexpected identifier

我做错了什么？我尝试了其他相关帖子中提到的所有内容，但没有运气。

if (event.status) {
    $("#targetId").empty();
    $("#targetId").append("<ul>Please select if this is your organisation</ul>");
    for(var i = 0; i < result.length; ++i){

        var li = "<li><a href=\"#\" onclick=\"return captureDetails("+result[i]+");\">";
        $("ul").append(li.concat(result[i].Name))
    }
} 

Answer 1

这里的问题是未格式化的内联事件处理程序，它创建了无效的语法。

这里更合适的解决方案是使用事件委托(delegate)和 data-* api 来存储数据。

//just for testing purpose
var event = {
    status: true
  },
  result = [{
    name: 'abc',
    id: 1
  }, {
    name: 'asdf',
    id: 2
  }]

if (event.status) {
  $("#targetId").html("Please select if this is your organisation");
  var $ul = $('<ul />');
  for (var i = 0; i < result.length; ++i) {
    var $li = $('<li />').appendTo($ul);
    $('<a />', {
      text: result[i].name
    }).data('obj', result[i]).appendTo($li)
  }
  $("#targetId").append($ul)
}

//in dom ready handler
$("#targetId").on('click', 'ul a', function() {
  var obj = $(this).data('obj');
  snippet.log('clicked on: ' + JSON.stringify(obj));
});

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<!-- To show result in the dom instead of console, only to be used in the snippet not in production -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="targetId"></div>