无法在ajax动态生成的元素下绑定事件

Question

业务用的chrome浏览器，整个页面都是ajax数据实时更新内容。因为甲方不给对接，只能由插件的形式来实现：<button>按键“确定”按下后绑定一个事件，该事件是查找关键字，如果匹配上就添加进列表高亮显示。
现在的问题是查看该button的 event listeners的click事件并没有绑定该js。
可是我把这个网页保存下来，就能绑定该事件。。。。这种应该是静态网页了。。
请问该怎么解决啊？

//添加ul
var $addKey = $('<div class ="keyBox" id="addkey"><ul class="list-inline"><li class="stitle" id="test1">关键字</li></ul></div>');
//样式加载在header后面
$("#header").after($addKey)
//设置关键字
var keysAll = ["KEY1","KEY2"........];
//button绑定事件，按"确定"运行该事件，可是无法绑定？？？
$(document).on("click","button",function () {
    //清楚上一次查询结果
    $("#addkey li").not(":first").remove();
 //   延迟1.5S后执行
    setTimeout(function () {
        //获取atricle内容
        var keytext = $("article").text();
        // 关键字匹配
        for (i = 0; i < keysAll.length; i++) {
            if (keytext.indexOf(keysAll[i]) > -1) {
                //匹配上就添加li元素
                var elementKey = "<li class='keyline'>"+keysAll[i]+"</li>";
                $("#test1").after(elementKey);
            }
        }
    },1500)
})

这是小部分截图，那个“确定”是甲方的系统动态生成的。
如果我把网页保存再运行可以看到事件是绑定。

可是在业务端，就始终无法绑定，只能绑定他们自己的js。

Answer 1

看上去你已经是事件委托了。但是你代码中没有出现button的dom。提供一下相关代码吧