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

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>';
            }
          }
    }
);

如果没有找到结果，下拉列表会显示 link。我已将其连接到单击处理程序上的 Jquery，如下所示，但是当我单击 link 时，它只是重新加载页面？

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

    e.preventDefault();

    // some stuff
});

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

Answer 1

附加事件时，link 不在 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() 函数，您可以单击动态生成的 HTML 个不在 DOM.

中的元素

示例：

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

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

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

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

JQuery on click event not working inside dropdown menu with hyperlink?

javascript

jquery

onclick

typeahead.js