jQuery выбор сделан с неупорядоченным списком, не нажав

Question

Я использую неупорядоченный список для замены функции select. У меня есть государственная и городская комбо, где я выбираю государство, а затем он автоматически заполняет город. Традиционный выбор для регистрации.

Проблема в том, что я могу делать вещи jSon, но когда я загружаю < li> в города, я не могу получить щелчок. Я покажу код:

$('ul#states li a').click(function() { 

    var uf = $(this).find('span.value').html(); 

    var $comboCidades = $('ul#cities'); 
    if (uf == 0) { 
     //$comboCidades.html('<a href="javascript:;"><span>Selecione</span></a>'); 
     return; 
    } 
    $.getJSON('/contato/cidades/', { uf: uf }, function(data) { 
     var options = ''; 
     var dataLength = data.length; 
     for (i = 0; i < dataLength; i++) { 
      options += '<li><a href="javascript:void(0);">'+data[i]['nome']+'<span class="value" style="display:none">'+data[i]['id']+'</span></a></li>'; 
     } 
     $comboCidades.html(options); 
    });   

}); 

That's кода JQuery, я прошу/contato/Cidades/что Return's мне enconded JSON со всеми городами, он отлично работает.

Итак, я заполняю тег < ul> командой $ comboCidades.html (options); и IT WORKS, у меня может быть < ul> со всеми городами, разделенными < li>, проблема в том, что я не могу выбрать города < li>, он не получил значения, но, если я добавьте < li>, не загружая json, он может получить значение из li.

Есть ли проблемы при загрузке < li> с jquery и html() что это не настоящий < li>? Могу ли я исправить это с помощью некоторых функций jQuery ?!

MY HTML КОД:

<div class="input"> 
    <label>Cidade:</label> 
    <div class="select"> 
     <p><a href="javascript:;"><span>Selecione</span></a></p> 
     <ul> 
      <li><a href="javascript:;">Santa Catarina</a></li> 
     </ul> 
    </div> 
</div> 

Answer 1

Я предполагаю, что вы назначая click событие для элементов под #cities при загрузке страницы.

Проблема в том, что если эти элементы не существуют при загрузке страницы, они не получают событие.

Попробуйте использовать .live() вместо:

$('ul#cities li a').live('click', function() {... 

Или лучше использовать .delegate(), если у вас есть JQuery 1.4 или более поздней версии.

$('ul#cities').delegate('li a', 'click', function() {... 

Это помещает обработчик на ul#cities так до тех пор, как она существует при загрузке страницы, обработчик будет там для вас. (Подобный live(), который помещает обработчик выше в DOM.)

Примечание стороны, когда вы ссылки идентификатор, $('#cities') немного лучше, чем $('ul#cities').