当数据附加到div时，如何在JavaScript函数中将JSON数据作为参数传递？

jQuery+JavaScript+Rails 4

prefix = "onward_"

json_data = {"367278": 
               {"bus_schedules": 
                  { "id": 367278,
                    "origin_id": 134,
                    "destination_id": 506
                  },
                "drop_points": null,
                "board_points": null,
                "operator_name": "ABC"
                }
             }

json_data1 = JSON.stringify(json_data);

html = '<a href="#" id="'+prefix+'active_travel_filter_'+
       operator_ids[i]
       +'"onclick="removeTravelFilter('
       +'\''+prefix+'\''+',\'travels\''+',\''
       +json_data1+'\',\''+json_data1+'\')" 

   value="'+operator_ids[i]+'">'
           +getOperatorName[operator_ids[i]]+'</a>'

console.log(html);

$("#active_fiters_blk").append(html);

---

它应该是一个内联脚本，因为我需要每个单独的

onclick

事件。

我会维护一个字典，将锚id名称与其对应的json数据关联起来

window.dataCache = {
   "onward_active_travel_filter_90": {...},
   ...
}

单击元素后，我将获取所需的json对象

$('a').click(function(){
   var id = this.id;
   var jsd = dataCache[id];
   //pass to target function
   foo(jsd);
});

现在，如果锚添加到页面dom中的时间稍晚，我必须注意适当地附加事件处理程序

在jquery中，我们可以只使用处理程序

说明：

嗯，我们通常做一些类似于

$（'element'）的事情。这通常在jquery dom就绪事件中执行：

$(function(){
    $('element').click(function(){...});
});

一旦dom准备好使用jquery，就会执行dom就绪事件中的代码拉伸。因此，click事件将附加到DOM中当时存在的任何
元素

任何后续将
元素添加到网页中的操作，都不会附加click事件处理程序

但是我们想要这样的功能

因此，我们必须手动处理它。意思是创建
元素
适当地连接事件单击处理程序，然后将其添加到DOM中

另一种方法是jQuery
.on（）
方法。然而，它的功能不同于上面所描述的。它侦听在目标容器上“冒泡”的单击事件

请阅读
.on（）
的文档以了解更多信息。
您尝试插入的HTML是以下字符串：



当您将其放入DOM中时，浏览器会被
onclick
部分的参数弄糊涂：
onclick=“removeTravelFilter（'forward_uu'，'travels'，“{”
）最后一个引号（
“
）将被解释为
onclick
参数的结尾

如果在JavaScript中切换引号，如下所示：

html = "<a href='#' id='"+prefix+"active_travel_filter_"+operator_ids[i]+"' onclick='removeTravelFilter("+"\""+prefix+"\""+",\"travels\""+","+json_data1+","+json_data1+")' value='"+operator_ids[i]+"'>"+getOperatorName[operator_ids[i]]+"</a>"

html=“”

那你应该没事了：



我并不是说这是将这些参数传递给函数的最佳方式，但它是有效的。
为什么要/需要将其存储为数据属性？这通常用于从服务器传输数据。我需要将完整的json_数据传递给另一个js函数，在那里我将验证这些内容。不要使用内联事件处理程序或使用HTM构建UIL字符串。创建适当的DOM元素并使用JavaScript绑定事件处理程序。这样，您甚至不必将数据转换为JSON。您当前的方法只会使您以后进行更改更加困难。若要了解有关事件处理程序的更多信息，请参阅。若要了解有关DOM的更多信息：。由于您使用的是jQuery，您可能需要o从阅读jQuery教程中获益：。我对javascript和jQuery不熟悉。请您详细说明一下。此json_数据来自以前的js函数。它来自rails view.html.erb by…..对。因此，您编写的代码处于一种for循环中？何时调用？是的，我尝试过这个。在函数上，但您知道我是一个p正在结束一个链接，当我点击该链接时，它总是使用最后一个id…但我希望每个链接上都有一个点击事件…对。在参数列表出现之后，
operator\u id
variable是什么？SyntaxError:missing….moveTravelFilter（“forward”、“travels”、“{“367278”）：{“bus\u schedules”：{“id”：367278，"o、 ..@user3410226:哦，看起来我在代码中犯了一个小错误，你能再试一次吗？我编辑了我答案的代码。是的，它工作正常，但你说的是最佳实践……你能告诉我你的最佳实践吗this@user3410226：最佳实践是将json存储在JavaScript变量中，并在函数调用som中引用该变量例如：
onclick='removeTravelFilter（“向前”，“旅行”，myJson，myJson）