从动态创建的div数组注册onclick事件? Rails + Jquery? [英] Register onclick events from dynamically created div array? Rails + Jquery?

问题描述

无法实现此目标之后使用link_to远程，我决定尝试jQuery方式. 这是jQuery循环和rails循环以及它们如何交互.问题是我只能在每个循环中的div之一上注册点击，所以事情并没有真正起作用.这是代码:

After failing to achieve this with link_to remote, I decided to try jQuery way. Here is the jQuery loop and the rails loop and how they interact. Problem is I getting to register clicks only on one of the div's out of each loop, so the thing is not really working.. Here is the code:

<% @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动作，并且有一个js.erb在该动作中将div从response_to更新为format.js，该部分有效.

And there is an iframize action in nodes controller and an js.erb that updates the div from respond_to format.js in that action, that part works..

非常感谢，任何建议都将不胜感激.

Thanks a lot, any advise greatly appreciated..

推荐答案

问题似乎是所有处理程序都共享dst变量.您可以使用 http://api.jquery.com/event.data/选项，您不依赖共享的闭包变量. JasonWoof建议的选项也可以使用，您可以选择对您而言更简单的一种.

Looks like the problem is the fact that all your handlers are sharing the dst variable. You can use the http://api.jquery.com/event.data/ option so that you're not relying on the shared closure variables. The option suggested by JasonWoof also works, you can choose whichever one seems easier for you.

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

为您的代码添加一些注释

A couple extra comments for your code

• 无需在循环内将呼叫包装在$(function(){})中.顶层应该只有一个呼叫$(function(){}).
• 无需使用String()，它只会使代码混乱，JavaScript会为您键入强制.
• 不要创建全局变量(循环中的i变量)
• 不需要两个循环或您创建的两个数组，都可以用更清晰的方式完成

• No need to wrap your calls in $(function(){}) within the loop. There should be just one call to $(function(){}) from the top level.
• No need to use String(), it just clutters the code, JavaScript does type coercion for you.
• Don't create global variables (your i variable in the loop)
• Don't need two loops, or the two arrays you created, it can all be done in a much clearer way

这是我建议将脚本更改为的内容

Here's what I suggest the script be changed to,

$(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()});
        });
    }
});

这篇关于从动态创建的div数组注册onclick事件? Rails + Jquery?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！