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，如下所示，但当我点击链接时它只是重新加载页面？

$(".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
});

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

2 个答案: