将点击事件绑定到动态添加的内容

Question

我有这个模板（Mustage）：

<script id="serviceTemplate" type="text/template">
    {{#data}}
        <li class="service-listitem">
            <div class="service-item">
                <h6><b>{{Type}}:</b> {{Name}}</h6>
                <div>
                    {{Remarks}}
                </div>
            </div>
            <div class="tb">
                <a href="#" class="tbdiv"><span class="glyphicon glyphicon-info-sign"></span>Info</a>
                <a href="#" class="tbdiv"><span class="glyphicon glyphicon-plus"></span>Add</a>
            </div>
        </li>
    {{/data}}
</script>

我正在绑定click事件：

$(".tbdiv").on("click", { id: 'test' }, addTo);

function addTo(event) {
   debugger;
   alert("id: " + event.data.id);
}

但click事件永远不会被解雇。这段代码出了什么问题？

Answer 1

这应解决事件问题：

$(document).on("click", ".tbdiv", { id: 'test' }, addTo);

function addTo(event) {
   debugger;
   alert("id: " + event.data.id);
}