動態添加 <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

試試這個以進行事件委托

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

Answer 2

use jQuery 'on' method to fire click function on dynamically added ul.

example :-    $('#parent').on("click", "#child", function() {});

回答

$('#parentDiv').on('click','#B1', function () {

    alert('back');
});

$('#parentDiv').on('click','#B2', function ()  {

    alert('next');
});