javascript - 如何动态绑定(bind)事件

Question

如何将事件动态绑定(bind)到创建的 n 元素中？我将尝试这段代码，但元素始终使用变量 i (i=8) 的最后状态，我的范围有问题吗？

        console.log('add all children');

        var myloc = window.location.href + "jquery";
        var jquerySample = 8;

        for (i = 1; i <= jquerySample; i++) {

            var element=jQuery('<div/>', {
                id: 'subitemElement' + i,
                href: myloc + "/test_jQ_" + i,
                class: 'subitem',
                rel: 'external',
                text: "test_jQ_" + i,
                click: function(num) {
                    console.log("subitem jquery click");

                    window.location = myloc + "/test_jQ_" + num;
                }(i)
            });
            element.appendTo('#itemJQUERY');

            event.preventDefault();
        }

Answer 1

我认为使用以下代码您会更成功:

console.log('add all children');

    var myloc = window.location.href + "jquery";
    var jquerySample = 8;

    for (i = 1; i <= jquerySample; i++) {
        var element = $(document.createElement('div'))
            .attr(
                {
                    id: 'subitemElement' + i,
                    rel: 'external'
                })
            .data(
                {
                    url: myloc + "/test_jQ_" + i,   
                })
            .text('test_jQ_' + i)
            .addClass('subitem')
            .click(function(e)
                   {
                       window.location = $(this).data('url');
                   });

        element.appendTo('#itemJQUERY');
    }

div 没有名为 href 的属性。将其另存为数据。

请参阅此处的 jsfiddle:A working fiddle