動態創建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事件

回答

相關問題