javascript - 动态添加 <ul> 未触发点击事件

Question

我创建了 <ul>包含两个 <li> , 但他们都没有开火 click事件。

code

    var d = document.createElement('div');
    d.className = "dataTables_paginate paging_bootstrap pagination";
    var UL = document.createElement('ul');
    var L1 = document.createElement('li');
    L1.className = 'prev';
    var A1 = document.createElement('a');
    A1.appendChild(document.createTextNode('← Previous'));
    A1.id = 'B1';
    L1.appendChild(A1);
    UL.appendChild(L1);
    var L3 = document.createElement('li');
    L3.className = 'active';
    var A3 = document.createElement('a');
    A3.appendChild(document.createTextNode('1'));
    L3.appendChild(A3);
    UL.appendChild(L3);
    d.appendChild(UL);
    var L2 = document.createElement('li');
    L2.className = 'next';
    var A2 = document.createElement('a');
    A2.appendChild(document.createTextNode('Next →'));
    L2.appendChild(A2);
    A2.id = 'B2';
    UL.appendChild(L2);
   var root = document.getElementById('rose');
   root.appendChild(d);

script

$('#B1').click(function () {

        alert('back');
    });

    $('#B2').click(function () {

        alert('next');
    });

Answer 1

试试这个用于事件委托(delegate)

$('#myContainer').on("click", element , function(){
   alert('back');
});