Загрузка Jquery поверх ранее загруженного контента

Question

Проблемы с попыткой выбрать html, введенный в DOM с использованием нагрузки jquery Работает, если содержимое ul # links не заменено, иначе оно не загружается в #content.

• Базовый пример

JS

$(document).ready(function() { 

  // Load links into tab 
  $("ul#tabs li a").click(function(){ 
      urlTabs = $(this).attr("href"); 
      console.log(urlTabs); 
      $("ul#links").load(urlTabs); 
      return false; 
  }); 

  // Load content 
  $("ul#links li a").click(function(){ 
    urlLinks = $(this).attr("href"); 
    console.log(urlLinks); 
    $("#content").load(urlLinks); 
    return false; 
  }); 

});

HTML

  <ul id="tabs"> 
    <li><a href="/tab1">Tab 1 </a></li> 
    <li><a href="/tab2">Tab 2</a></li> 
  </ul> 
  <ul id="links"> 
    <li><a href="/link1">This will load into #div, the others will not</a></li> 
  </ul> 
  <div id="content"> 
    <p>Load content in here</p> 
  </div> 

Новичок в JS в целом, любая помощь приветствуется.

Answer 1

Когда вы привязываете обработчик клика для «ul # links li a», он привязывает его только к существующим узлам DOM, соответствующим селектору. live events также будет привязываться к элементам, внедренным динамически после того, как вы выполните привязку .:

// Load content 
$("ul#links li a").live("click" ,function(){ 
    //...
});