Решение проблем с jQuery и неупорядоченным списком Загрузка

Question

Я строю очень упрощенное неупорядоченное дерево списков в XHTML с несколькими уровнями глубины. Это работает так, что вы щелкаете по родительскому узлу, и он использует API-интерфейс jQuery.load (), чтобы вызвать AJAX-запрос к серверу, чтобы узнать, есть ли у этого узла дочерние узлы. Если это так, он вставляет эти узлы внутрь. Когда вы снова щелкаете по родительской ссылке, она выполняет.remove(), чтобы удалить потомков.

Все отлично работает в Safari, Chrome и FireFox. Но в IE6, IE7, IE8 и Opera он ломается.

В IE, код работает при расширении родителей, чтобы показать детям. Но когда я щелкаю родителей, чтобы снова спрятать детей с помощью.remove(), он входит в детей и удаляет их детей, а не себя.

В Opera код расширяется, но затем расширяет поля по мере его расширения. Затем при удалении возникает та же проблема, что и в IE.

Что может быть причиной этой странности?

Образец выложен здесь: http://volomike.com/downloads/sample1.tar.gz

Answer 1

ОК, Воломике! Я посмотрел на ваш код и было несколько проблем:

Во-первых, когда вы используете load, он не заменяет выбранный узел, он заменяет его содержимое.

Итак, вы вызываете нагрузку на li но и возвращая то же самое li в вашем результате AJAX. Впоследствии вы получаете это:

<li id="node-7">
   <li id="node-7">
      ...

Кроме того, вы закрывали его с двумя </ul> теги в вашем ajax.php линия 38 вместо одного ul и один li,

Итак, если вы исправите эти вещи, он должен начать работать. Тем не менее, я бы подошел к тому, что вы делаете, совершенно по-другому. Я надеюсь, что это помогает вам:

HTML

<ul id="tree">
  <li id="node-1"><a href="#">Cat 1</a></li>
  <li id="node-7"><a href="#">Cat 7</a></li>
</ul>

PHP

// You'll have to write the code, but get it into this format:
// Basically push each row of a `mysql_fetch_array` into a new array
$ret = array(
  array('2', 'Cat 2'),
  array('3', 'Cat 3')
);

// Then return it to the browser like this:
echo json_encode( $ret );

JS / JQuery

$(function(){
   $("ul#tree li a").live('click', function(e){
      e.preventDefault();
      var $li = $(this).closest('li');
      if( $li.find('ul').length ){
          // Remove UL if it exists
          $li.find('ul').remove();
      } else {
          // Get the ID
          var id = $li[0].id.replace('node-','');
          // Get the JSON for that id
          $.getJSON('/ajax.php', { id: id }, function( data ){
              // If data is not empty and it is an array
              if(data && $.isArray( data )){
                 // Build our UL
                 var $ul = $("<ul></ul>");
                 // Loop through our data
                 $.each(data, function(){
                    // Build an LI, use `text()` to properly escape text
                    // then append to the UL
                    $('<li id="node-' + this[0] + '"><a href="#"></a></li>')
                        .find('a').text(this[1])
                        .end().appendTo($ul);
                 });
                 // Finally, add the UL to our LI
                 $ul.appendTo($li);
              }
          });
      }
   });
});