jQuery select made with unordered list not clicking

Question

Hello friends,

I´m using an unordered list to replace the select function. I have a state and city combo where I choose the state and then it auto complete the city. A traditional select for registration.

The problem is that I´m able to do the jSon stuff, but when I load the < li > into the cities I´m not able to get the click. I will show the code:

    $('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 the Jquery code, I request /contato/cidades/ that Return´s to me a enconded json with all the cities, it works perfect.

So, I populate a < ul > tag with the command $comboCidades.html(options); and IT WORKS, I can have the < ul > with all the cities separated by < li >, the problem is, that I´m not able to select the cities < li >, it did not get the values, but, if I add a < li > without being loaded by json, it can get the value from the li.

Is there any problem loading < li > with jquery and html() that it´s not a real < li >? Can I fix it with some kind of jQuery functions?!

MY HTML CODE:

        <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>

Thanks and best regard´s.

Answer 1

I assume you're assigning the click event for the elements under #cities when the page loads.

Problem is that if those elements don't exist when page loads, they don't get the event.

Try using .live() instead:

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

Or better, use .delegate() if you have jQuery 1.4 or later.

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

This places the handler on ul#cities so as long as it exists when the page loads, the handler will be there for you. (Similar to live() which places the handler higher up the DOM.)

Side note, when you're referencing an ID, $('#cities') is a little better than $('ul#cities').