Когда добавляется li, разве оно не становится частью ul на самом деле?

У меня сейчас есть этот код:

<ul><li class="listitem">text<li></ul>

jQuery:

$('.listitem').click(function() {  
  $("#elname").text($(this).text());  
  $('#slists').css('visibility','hidden')  
  $('#elname').css('visibility','visible')  
  $('#elname').css('display','inline-block')  
});

Предполагается, что это скрывает div, и это так, но когда я добавляю элементы в ul (с классом listitem), ничего не происходит с добавленным элементом, класс, который он получает, правильный, заголовок и значение тоже.

Может ли это иметь какое-то отношение к приведенному выше коду, находящемуся в функции готовности документа?


javascript document click jquery append
person Noor    schedule 09.05.2010    source источник
comment
Не могли бы вы уточнить, что вы делаете, и показать фактический код, о котором идет речь? Куда ты что-то добавляешь?   -  person Pekka    schedule 09.05.2010

Ответы (2)


arrow_upward
11
arrow_downward

Вместо этого используйте .live(), например:

$('.listitem').live('click', function() {  
  $("#elname").text($(this).text())
              .css({ visibility:'visible', display: 'inline-block' });
  $('#slists').css('visibility','hidden')  
});

.live() слушает на уровне document ваш щелчок, чтобы всплыть... и новые и старые элементы всплывают это событие одинаково, поэтому ему все равно, что было добавлено позже, когда ваш обработчик .click() привязывает щелчок к существующим элементам во время запуска селектора.

Кроме того, вы можете присвоить своему <ul> идентификатор или класс и использовать .delegate() следующим образом:

$('#myUL').delegate('.listitem', 'click', function() {  
  $("#elname").text($(this).text())
              .css({ visibility:'visible', display: 'inline-block' });
  $('#slists').css('visibility','hidden')  
});

Это приводит к меньшему пузырению, так что немного аккуратнее на стороне события, оно фиксирует его на <ul>, а не полностью на document.

person Nick Craver    schedule 09.05.2010
comment
спасибо за подробное объяснение! и лучшее кодирование :) !! - person Noor; 09.05.2010
comment
@Noor - Добро пожаловать :) Еще один совет: если вам не нужны скрытые элементы, которые занимают место в скрытом состоянии, вы можете использовать display вместо visibility и просто вместо этого вызывать ярлыки .show() и .hide(). - person Nick Craver; 09.05.2010

arrow_upward
7
arrow_downward

События щелчка устанавливаются один раз для всех элементов в DOM во время настройки. Добавление элемента списка не приведет к повторному созданию этих элементов кликов.

Вам нужно будет использовать функцию живых событий jQuery, чтобы создавать события кликов, которые применяются к элементам, созданным на муха.

person ceejayoz    schedule 09.05.2010
comment
Спасибо! Так что я понял это частично правильно :)! очень хорошее объяснение и ссылка! - person Noor; 09.05.2010