动态创建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/>', {
    				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/1.11.0/jquery.min.js"></script>
<div id="pnlParent" style="padding:5px;border:solid; height:150px;">
</div>