problems dynamic name event click inside a For not working jquery

Question

problems dynamic name event click inside a For not working jquery

Navigation

#1 by (1 votes)

0

Greetings when assigning a dynamic name does not assign the action

html

<!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <div class="section no-pad-bot" id="index-banner">
    <div class="row">
      <div class="col s12">
          <div id="crad0"> Presiona 1</div>
          <div id="crad1"> Presiona 2</div>
          <div id="crad2"> Presiona 3</div>
          <div id="crad3"> Presiona 4</div>
          <div id="crad4"> Presiona 5</div>
          <div id="crad5"> Presiona 6</div>
          <div id="crad6"> Presiona 7</div>
          <div id="crad7"> Presiona 8</div>
          <div id="crad8"> Presiona 9</div>
          <div id="crad9"> Presiona 10</div>
    </div>
   </div>
  </div>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.js"></script>
    <script>

        for(var i = 0 ; i <10; ++i)
        {
        $("#crad"+i).click(function() { console.log("mensaje: "+i) });
        }  

    </script>
</body>
</html>

javascript jquery loops

asked by Fabian Vazquez Gomez 19.10.2017 в 17:59

source

1 answer

List dictionary, tour Python values Query two or more tables

score 1 · Accepted Answer

Your example function the problem is that it always takes you the last value by themes of how it handles the event loop or Javascript events loop .

Possible solutions, use IFFY which is just create a javascript closure to create different scopes in the execution of the:

  for(var i = 0 ; i <10; ++i)
    {
        (function(i){
            $("#crad"+i).click(function() { console.log("mensaje: "+i) });
        })(i)
    }

Another solution is to use let, instead of bar inside the for:

for(let i = 0 ; i <10; ++i)
{
$("#crad"+i).click(function() { console.log("mensaje: "+i) });
}