注册从动态创建的div阵列的onclick事件？轨道+ jQuery的？(Register o

后未能实现这一带的link_to远程，我决定尝试jQuery的方式。这里是jQuery的循环和轨道环以及它们如何相互作用。问题是，我得到仅在div的出每个循环的一个注册的点击，所以事情是不是真的工作。这里是代码：

<% @node.parent_relation.videos.each_with_index do |vid, idx| %>
  <%=  image_tag("http://img.youtube.com/vi/#{vid.content}/1.jpg", :id  => "img_div_#{idx}") %>
  <div id="vid_vid_<%=idx%>"  style="display: none"> <%= vid.id %></div>
<% end %>

  <script>
  var ids = "<%= @node.parent_relation.videos.length %>";
  var div_arr = [];
  var img_arr = [];
  var vid_id = 0;
  for( i=0; i < parseInt(ids); i++){
    var x = String("vid_vid_"+String(i));
    var y = String("img_div_"+String(i));
    div_arr.push(x);
    img_arr.push(y);
  }
  for ( i=0; i < parseInt(ids); i++){
    var vst = '#'+String(img_arr[i]);
    var dst = '#'+String(div_arr[i]);
    $(function() {
      $(vst).click(function(){
        var vid_id = $(dst).html();
        console.log(vid_id);
        $.post("/nodes/iframize/", {video_id: vid_id});
      });
    })

}
</script>

并且在节点控制器的iframize行动，并更新从的respond_to format.js股利在该操作的js.erb，这部分工程..

非常感谢，非常感谢任何意见..

Answer 1:

貌似问题是，所有的处理程序都共享的事实dst变量。您可以使用http://api.jquery.com/event.data/让你不依赖于共享闭包变量的选择。通过JasonWoof建议的选项也行，你可以选择任何一个，似乎对你更容易。

for ( i=0; i < parseInt(ids); i++){
  var vst = '#'+String(img_arr[i]);
  var dst = '#'+String(div_arr[i]);
  $(function() {

    $(vst).click({dst: dst}, function(event){
      var vid_id = $(event.data.dst).html();
      console.log(vid_id);
      $.post("/nodes/iframize/", {video_id: vid_id});
    });
  })
}

为您的代码一对夫妇额外的评论

无需包裹在您的通话$(function(){})在循环中。应该有只有一个调用$(function(){})从顶层。
无需使用String()它只是杂波的代码，JavaScript并为您键入的胁迫。
不要创建全局变量（你i在循环变量）
不需要两个循环，或您创建的两个数组，它都可以在一个更清晰的方式进行

这里是我的建议脚本改为，

$(function() {
    var ids = "<%= @node.parent_relation.videos.length %>";
    for( var i=0; i < ids; i++){
        $("img_div_"+i).click({dst: $("vid_vid_" + i)}, function() {
            $.post("/nodes/iframize/", {video_id: event.data.dst.html()});
        });
    }
});

Answer 2:

麻烦的是，DST和VST在循环正在发生变化。所以，当你的点击处理程序运行时，它使用DST和VST，而不是当你创建点击处理程序所具有的数值的最终版本。

您需要DST和VST，您可以通过创建一个新的上下文做的副本。例

function make_handler(vst, dst) {
    $(vst).click(function(){
        var vid_id = $(dst).html();
        console.log(vid_id);
        $.post("/nodes/iframize/", {video_id: vid_id});
     });
}
$(function() {
    for ( i=0; i < parseInt(ids); i++){
        var vst = '#'+String(img_arr[i]);
        var dst = '#'+String(div_arr[i]);
        make_handler(vst, dst);
    }
});

你可以这样做在线，但你需要一个函数，VST和DST作为参数，因为它们是复制，以及上下文保存回调时发生。

编辑：由“做内联”我的意思是更换make_handler（）的调用类似：