JQuery單擊事件不起作用下拉菜單與超鏈接？

Question

我有使用Twitter-預輸入自動填充下拉如下：

$('#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()功能，您可以點擊動態生成HTML不在您的DOM中的元素。

例子：

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

，或者您可以使用on()爲

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