Question

我使用无序列表来替换select函数。我有一个州和城市组合，我选择州，然后它自动完成城市。传统的注册选择。

问题是我能够做jSon的东西，但是当我加载＆lt; 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);
    });         

});

这是Jquery代码，我请求/ contato / cidades /返回给我一个与所有城市相关的json，它运作完美。

所以，我填充了一个＆lt; ul＆gt;使用命令$ comboCidades.html（options）标记;和IT工作，我可以有＆lt; ul＆gt;与所有城市分开的＆lt; li＆gt;，问题是，我无法选择城市＆lt; li＆gt;，它没有得到值，但是，如果我添加＆lt; li>没有被json加载，它可以从li获得值。

加载时是否有任何问题＆lt; li>使用jquery和html（），它不是真正的＆lt; li＆gt;？我可以用某种jQuery函数修复它吗？！

我的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() {...

或者更好的是，如果你有jQuery 1.4或更高版本，请使用.delegate()。

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

这会将处理程序放在ul#cities上，只要它在页面加载时存在，处理程序就会在那里为您服务。（类似于live()，它将处理程序放在DOM的上方。）

旁注，当您引用ID时，$('#cities')略好于$('ul#cities')。

jQuery选择使用无序列表而不是单击

1 个答案: