JQuery on click事件在带有超链接的下拉菜单中不起作用？

Question

我有一个使用twitter-typeahead的自动完成下拉菜单，如下所示：

$('#Data').typeahead(
   {
        displayKey: 'description',
        source: myData.ttAdapter(),
        templates: {
            empty: [
              '<div class="empty-message">',
                <a class="js-not-found" href="#">No results found</a>,
              '</div>'
            ].join('\n'),
            suggestion: function (data) {
                return '<span>' + data.description + '</span>';
            }
          }
    }
);

当没有找到结果时，下拉菜单会显示一个链接。我已经将其连接到Jquery on click处理程序，如下所示，但当我单击链接时，它只是重新加载页面？

$(".js-not-found").click(function (e) {

    e.preventDefault();

    // some stuff
});

如果我在下拉列表之外有一个正常的链接，那么事件处理程序工作得很好，如下所示的<a class="js-not-found" href="#">No results found</a>

Answer 1

附加事件时，链接不在DOM内。对于动态生成的元素，您应该使用on。

你能不能试试：

$(document).on('click','.js-not-found', function (e) {
    e.preventDefault();
    // some stuff
});

为了获得更好的性能，建议在生成的元素的DOM中使用直接祖先：

$(".container").on('click','.js-not-found', function (e) {
    e.preventDefault();
    // some stuff
});

Answer 2

使用delegate()函数，您可以单击DOM中不存在的动态生成的HTML元素。

示例：

$(document).delegate('.js-not-found', 'click', function()
{
 e.preventDefault();
 //your code
});

或者，您可以使用on()作为

$(document).on('click', '.js-not-found', function()
{
// your code
});