动态创建Div并使用参数设置其onclick事件

我创建了这个示例，我尝试在动态创建的div上设置单击事件，但我无法获取设置点击事件时传递的参数值。在这个例子中，我使用了数组，但实际上我正在通过web服务获取json。动态创建Div并使用参数设置其onclick事件

$(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>

来源

2017-07-18 SAURABH

使用闭包（如我联系重复），或者使用一个单一的委托事件处理程序，并把在您追加到DOM的元素的'data'属性中定制元数据。就我个人而言，我会使用后者 –

试试这个代码：

$(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>

来源

2017-07-18 08:33:59

哇，让“事情”为我做魔术。 – SAURABH

动态创建Div并使用参数设置其onclick事件

回答

相关问题