在 jQuery 中创建 DOM 之前的绑定事件

Question

var thumbDom = '';

for (var i = 0; i < 10; i++) {
  thumbDom = thumbDom + '<div id = "div-" ' + i + '>DIV-'+ i +'</div>';
  bindEvent(i);
}

$('#parent').append(thumbDom);


function bindEvent(i){
  $('#div-' + i).click(function(event) {
        alert(i);
  });
}

我知道代码无法运行，因为事件在 dom 追加之前绑定。但是无论如何在附加到 dom 树之前将点击事件绑定到许多动态 doms？

我不想使用 $(document).on('click, ... ，我想给子节点绑定事件。

任何建议都会有帮助，谢谢~

Fiddle Here

Answer 1

您可以试试这个方法：

定义一个<div></div>
设置其id和innerHtml
将其与 onclick 事件绑定（提醒其 id）
将其附加到“#parent”项

$(function() {
    for (var i = 0; i < 10; i++) {
        $("<div></div>")
            .attr("id", "div-" + i)
            .html("DIV-" + i)
            .click(function() {
                alert($(this).attr("id"));
            })
            .appendTo("#parent");
    }
});

在 jQuery 中创建 DOM 之前的绑定事件

Binding event before Creating DOM in jQuery

javascript

jquery

events

append