jQuery store value on .append

Question

How could I save data[i] value in order to use it in location.href?

  $('<td />', {text: data[i]}),
      $('<td />').append(
        $("<i [...] ></i>").click(function(){
          var sure = confirm("text");
          if (sure)
            location.href ="privateServices/deleteZone.php?zone="+data[i];
        })

that's my Javascript code inside a for cicle and data[i] is obviously undefined once i clicked on icon, so i need to storage its different value for every linked icon

@JulienKlepatch `click` function use index `i`, then store data in variable in outer scope won't work. — instead, May 28 '17 at 13:29

charlietfl · Accepted Answer · 2017-05-28T14:01:33.063

You could add a data property that can be accessed when event occurs:

var $i = $("<i [...] ></i>")
             .data('href', "privateServices/deleteZone.php?zone="+data[i])
             .click(function(){
                  if(confirm("text")){
                     location.href = $(this).data('href')
                  }
              });

var $td = $('<td />', {text: data[i]}).append($i);

Or even simpler assign data[i] to another variable and use that variable instead.

instead · Answer 2 · 2017-05-28T15:11:45.200

0

You need one extra function that will store data[i] value.

// put this function outside loop - if any
function set_click(el, value){
    return el.click(function(){
      var sure = confirm("text");
      if (sure)
        location.href ="privateServices/deleteZone.php?zone="+value;
    }
}

// [...]

$('<td />', {text: data[i]}),
  $('<td />').append(
      function(){
          return set_click($("<i [...] ></i>"), data[i]);
      }
  );

edited May 28 '17 at 15:11

answered May 28 '17 at 13:17

instead

3,101
2
26
35

@charlietfl Yup, there was little bug in the code. Now it does solve the problem. – instead May 28 '17 at 14:21
not really....has same closure problem for `data[i]` as exists in OP code – charlietfl May 28 '17 at 14:23
@charlietfl here: https://jsfiddle.net/instead/6j3v8zcb/ different code, but the same job of set_click – instead May 28 '17 at 14:36
Not same at all because `i` will not be what you expect it to be if it is defined in a `for()` loop for example. Would become same problem as https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example – charlietfl May 28 '17 at 14:39
@charlietfl You are pretty hard to convince ;) try that one: https://jsfiddle.net/instead/6j3v8zcb/1/ – instead May 28 '17 at 14:48
Agree would work in a **closure** like `forEach` but so would OP code. More likely using a `for()` loop which isn't a closure and thus the problem occurs – charlietfl May 28 '17 at 14:52
Also you are calling setClick` inside the event handler in answer which is different. It won't get called until event occurs which is different than your fiddle demo – charlietfl May 28 '17 at 14:54
@charlietfl thanks to You, I saw that I am missing return in functions. Now the code looks almost the same as OP. https://jsfiddle.net/instead/6j3v8zcb/2/ You have to agree that it works and there is no closure problem. Or using for loop: https://jsfiddle.net/instead/6j3v8zcb/3/ – instead May 28 '17 at 15:17
yes...much different because you consume `data[i]` immediately – charlietfl May 28 '17 at 15:20
@charlietfl same as You are in You answer – instead May 28 '17 at 15:24

jQuery store value on .append

2 Answers2