Register Onclick Events From Dynamically Created Div Array? Rails + Jquery?

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

Solution 1:

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

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

Solution 2:

The trouble is that dst and vst are changing in your loop. So when your click handler runs, it uses the final versions of dst and vst, not the values they had when you created the click handler.

You need a copy of dst and vst, which you can do by creating a new context. Example

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

You can do it inline, but you need a function that takes vst and dst as arguments, because they are copied, and the context is preserved for when the callback happens.

Edit: by "do it inline" I mean replacing the make_handler() call with something like:

function(vst,dst) { ... } (vst, dst);