Обновить содержимое div с помощью jquery

Question

У меня есть сайт, на котором я показываю две таблицы в одной строке, одну ко второй. Над таблицами у меня есть меню, в котором пользователь может выбирать отображаемые таблицы. Проблема в том, что я использую функции jquery div.remove; div.append; div.load ничего не происходит - новая таблица не отображается.

HTML код:

<div id="container_menu"> 
    <div id="menu1"> 
    <ul id="mainmenu"> 
    <li><a href="#">Choose the first map <i class="arrow"></i></a> 
     <ul> 
      <li class="div1clear" data-path="tables/cycling1_table.html"><a href="#">% of employees cycling to work</a></li>  
      <li class="div1clear" data-path="tables/white_british1_table.html"><a href="#">% of White British residents</a></li> 
     </ul> 
    </li> 
</ul> 
</div> 
    <div id="menu2"> 
    <ul id="mainmenu"> 
    <li><a href="#">Choose the second map <i class="arrow"></i></a> 
     <ul> 
      <li class="div2clear" data-path="contents/work/cycling2.html" data-path2="tables/cycling2_table.html"<><a href="#">% of employees cycling to work</a></li>     
      <li class="div2clear" data-path="contents/ethnic/white_british2.html" data-path2="tables/white_british1_table.html"><a href="#">% of White British residents</a></li> 
     </ul> 
    </li> 
</ul> 
</div> 
</div> 

    <div id="container_table">   
     <div id="table_div1"></div> 
     <div id="table_div2"></div> 
    </div> 

Изменить содержание DIV:

<script type="text/javascript"> 
$(document).ready(function(){   
    $(".div1clear").click(function(){       
      var tablePath = $(this).data("path2");     
      $("#table_div1").remove(); 
      $("#container_table").append("<div id='table_div1'></div>");  
      $('#table_div1').load(tablePath);  
     }); 

     $(".div2clear").click(function(){ 
      var tablePath2 = $(this).data("path2");     
      $("#table_div2").remove(); 
      $("#container_table").append("<div id='table_div2'></div>");  
      $('#table_div2').load(tablePath2); 
     });  
}); 
    </script> 

Файл с содержанием table_div1

  <script type="text/javascript"> 
      var table1; 
      var newList1 = []; 

    $.each(list, function(index, val) { 
     table1 = { 
      name: val.NAME, 
      value: val.white_brit 
     }; 
     newList1.push(table1); 

    }); 

    var createdTable1; 
    $.each(newList1, function(index, val) { 
     createdTable1 += '<tr><td>' + val.name + '</td>'; 
     createdTable1 += '<td>' + val.value + '</td></tr>'; 
    }); 

$('#table_div1').html(createdTable1); 
</script> 

Файл с table_div2 содержания:

<script type="text/javascript"> 
      var table2; 
      var newList2 = []; 

    $.each(list, function(index, val) { 
     table2 = { 
      name: val.NAME, 
      value: val.cycling 
     }; 
     newList2.push(table2); 
    }); 

    var createdTable2; 
    $.each(newList2, function(index, val) { 
     createdTable2 += '<tr><td>' + val.name + '</td>'; 
     createdTable2 += '<td>' + val.value + '</td></tr>'; 
     $('#table_div2').html(createdTable2); 
    </script> 

Также эти два js-кода с содержимым обеих таблиц, которые я разместил в исходном файле index.html, и после запуска сайта обе таблицы отображаются корректно, только после того, как я попытаюсь изменить таблицу, ничего не происходит.

Есть ли у вас какие-либо идеи, что может быть проблемой?

Заранее спасибо.

Answer 1

У вас определенно загружен JQuery? Убедитесь, что-то вроде:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>

перед всеми остальными вашего кода JavaScript, так что загружается первым.

Я только что запустил ваш код и смог удалить один из столов. Кроме того, обязательно укажите свою переменную «list». Я предположил, что вы только что оставили его со своего поста, но имеете его в своем коде.

С точки зрения замены, ваш tablePath возвращается неопределенным, я думаю.

var tablePath = $(this).data("path2");     

Определение this в приведенном выше линии:

<li class="div1clear" data-path="tables/cycling1_table.html"> 
    <a href="#">% of employees cycling to work</a> 
</li> 

Там нет 'path2' в нем определены. Возможно, имеет смысл иметь переменную, определяющую, где вы хотите загрузить данные, если вы нажмете на две верхние строки или две нижние строки.