Question

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);

// console.log输出

<a href="#" id="onward_active_travel_filter_90" onclick="removeTravelFilter('onward_','travels','{"367278":{"bus_schedules":{"id":367278,"origin_id":134,"destination_id":506},"drop_points":null,"board_points":null,"operator_name":"ABC"}}','{"367278":{"bus_schedules":{"id":367278,"origin_id":134,"destination_id":506},"drop_points":null,"board_points":null,"operator_name":"ABC"}}')" value="90">ABC</a>

但是在附加到div时我会收到这种格式，但它应该高于格式。

<a value="33" group)"}}')"="" group)"}}','{"367278":{"bus_schedules":{"id":367278,"origin_id":134,"destination_id":506},"drop_points":null,"board_points":null,"operator_name":"sre="" booking(ananth="" 367278":{"bus_schedules":{"id":367278,"origin_id":134,"destination_id":506},"drop_points":null,"board_points":null,"operator_name":"sre="" onclick="removeTravelFilter('onward_','travels','{" id="onward_active_travel_filter_33" href="#">ABC</a>

它应该是内联脚本，因为我想要每个onclick事件。

Answer 1

我维护一个字典，将锚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中，我们可以使用.on()处理程序。

说明：

好吧，我们通常做$('element').click(function(){...});之类的事情。这通常在jquery dom ready事件中执行：

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

一旦DOM准备好进行jquery消耗，就会执行dom ready事件中的代码段。因此，click事件将附加到该时间点存在于DOM中的任何element。

随后将element添加到网页中，点击事件处理程序将不会附加到它。

但我们想要这样的功能！

因此我们必须手动处理它。含义适当地创建事件单击处理程序的element连接，然后将其添加到DOM。

另一种方法是使用jQuery .on()方法。但是，它的功能与上面描述的不同。它会侦听在目标容器上“冒泡”的click事件。

请阅读.on()的文档以获得更好的主意。

Answer 2

您尝试插入的HTML是此字符串：

<a href="#" id="onward_active_travel_filter_0" onclick="removeTravelFilter('onward_','travels','{"367278":{"bus_schedules":{"id":367278,"origin_id":134,"destination_id":506},"drop_points":null,"board_points":null,"operator_name":"SRE Booking(Ananth Group)"}}','{"367278":{"bus_schedules":{"id":367278,"origin_id":134,"destination_id":506},"drop_points":null,"board_points":null,"operator_name":"SRE Booking(Ananth Group)"}}')" value="0">0</a>

当您将其放入DOM时，您的浏览器会被onclick部分的参数混淆：onclick="removeTravelFilter('onward_','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>"

然后你应该没事：

<a href='#' id='onward_active_travel_filter_0' onclick='removeTravelFilter("onward_","travels",{"367278":{"bus_schedules":{"id":367278,"origin_id":134,"destination_id":506},"drop_points":null,"board_points":null,"operator_name":"SRE Booking(Ananth Group)"}},{"367278":{"bus_schedules":{"id":367278,"origin_id":134,"destination_id":506},"drop_points":null,"board_points":null,"operator_name":"SRE Booking(Ananth Group)"}})' value='0'>0</a>

我并不是说这是将这些参数传递给您的函数的最佳方法，但它确实有效。

如何在追加到div的数据中将JSON数据作为参数传递给JavaScript函数？

2 个答案: