divを動的に作成し、パラメータを使用してonclickイベントを設定する

Question

この例では、動的に作成されたdivのclickイベントを設定しようとしていますが、clickイベントを設定中に渡すパラメータ値を取得できません。 この例では配列を使用していますが、実際にはWebサービスによってjsonを取得しています。

$(document).ready(function() { 
 
    myfunction(); 
 
}); 
 

 
function myfunction() { 
 
    var cars = ["Saab", "Volvo", "BMW"]; 
 

 

 
    for (var i = 0; i < cars.length; i++) { 
 
     $('<div/>', { 
 
      id: 'pnlmyDiv_' + i, 
 
      html: '<b>Click Me ' + i + '</b><br>', 
 
      style: 'padding:10px;border-width:1px;border-style:solid;margin-bottom:5px;cursor:pointer;' 
 
     }).appendTo('#pnlParent'); 
 

 

 
     $("#pnlmyDiv_" + i).on("click", function() { 
 
      fnGetMessages(cars[i]) 
 
     }); 
 
    } 
 

 

 
} 
 

 
function fnGetMessages(car) { 
 
    alert(car); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="pnlParent" style="padding:5px;border:solid"> 
 
</div>

Answer 1

このコードを試してみてください。

$(document).ready(function() { 
 
     myfunction(); 
 
    }); 
 

 
    function myfunction() { 
 
     var cars = ["Saab", "Volvo", "BMW"]; 
 

 

 
     for (let i = 0; i < cars.length; i++) { 
 
      jQuery('<div/>', { 
 
    \t \t \t \t id: 'pnlmyDiv_' + i, 
 
    \t \t \t \t html: '<b>Click Me ' + i + '</b><br>', 
 
    \t \t \t \t style: 'padding:10px;border-width:1px;border-style:solid;margin-bottom:5px;cursor:pointer;' 
 
      
 
     }).appendTo('#pnlParent'); 
 

 

 
      $("#pnlmyDiv_" + i).on("click", function() { 
 
       fnGetMessages(cars[i]) 
 
      }); 
 
     } 
 

 

 
    } 
 

 
    function fnGetMessages(car) { 
 
     alert(car); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div id="pnlParent" style="padding:5px;border:solid; height:150px;"> 
 
</div>