導航欄上的href

Question

onclick事件這是我的導航欄內容

<div class="col-md-3"> 
<div class="bs-docs-sidebar hidden-print affix" role="complementary"> 
     <ul class="nav bs-docs-sidenav" id="titles"> 

     </ul> 
    </div> 
    </div> 

<script type="text/javascript"> 
$(function(){ 
    var html = ''; 
    $("td > h1 > a").each(function(){ 
     html = html + '<li><a href="#" data-scroll="' + $(this).attr('data-anchor') + '">' + $(this).text() + '</a></li>'; 
    }); 
    document.querySelector('#titles').innerHTML = html; 
}); 

$('#titles > li > a').on('click', function() { 
    console.log('called'); 
    var scrollAnchor = $(this).attr('data-scroll'), 
     scrollPoint = $('tbody[data-anchor="' + scrollAnchor + '"]').offset().top - 28; 
    $('body,html').animate({ 
     scrollTop: scrollPoint 
    }, 500); 
    return false; 
}); 

的第一個函數將填充根據HTML內容的數據。第二個函數將處理導航欄內容中的點擊事件。

但是，第二個函數從未得到執行。

有人能告訴我如何解決這個問題嗎？

Answer 1

在創建HTML時。

您應該使用Event Delegation。您必須使用委託事件方法使用.on()。

常規語法

$(document).on(event, selector, eventHandler); 

理想情況下，你應該用最接近的靜態容器更換document。在你的情況下，它的'#titles'。所以使用

$('#titles').on('click', 'li > a', function() { 
    console.log('called'); 
    var scrollAnchor = $(this).attr('data-scroll'), 
     scrollPoint = $('tbody[data-anchor="' + scrollAnchor + '"]').offset().top - 28; 
    $('body,html').animate({ 
     scrollTop: scrollPoint 
    }, 500); 
    return false; 
});