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

<分区>

我创建了这个示例，我试图为动态创建的 div 设置点击事件，但我无法获取在设置点击事件时传递的参数值。在此示例中，我使用了数组，但实际上我是通过 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>

最佳答案

试试这段代码:

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

关于javascript - 动态创建 Div 并使用参数设置其 onclick 事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45161207/

上一篇：javascript - 如何在react.js中获取li元素的 'e.key'？

下一篇：javascript - 如何在javascript中制作动画？

相关文章：

javascript - 在express js中从数据库全局访问配置

rest - jquery 中对 rest api 的 ajax 调用不再有效，由过期的 ssl 证书引起？

jquery - 从 jquery 的下拉框中删除一个克隆

javascript - 日期选择器因失去焦点而关闭

javascript - 清除除某些之外的所有 html 控件

html - 带有向右打开的下拉菜单的 sidenav 栏

javascript - Chrome 扩展 : Append functions to right click menu

javascript - Bootstrap 轮播TypeError : f[0] is undefined

javascript - 如何通过 coldfusion 或 javascript 查找浏览器是否支持 flash 播放器？

html - 拉动 div 右/左 Bootstrap 中的所有元素