使用无序列表进行的 jQuery 选择不单击

Question

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

问题是我能够执行 jSon 的操作，但是当我将

加载到城市中时，我无法获得点击。我将展示代码:

$('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，它工作完美。

因此，我使用命令 $comboCidades.html(options); 填充 < ul > 标记。并且它有效，我可以将 < ul > 与所有由 < li > 分隔的城市分开，问题是，我无法选择城市 < li >，它没有获得值，但是，如果我添加一个

，不被json加载，就可以从li中获取值。

使用 jquery 和 html() 加载 < li > 是否存在问题，因为它不是真正的 < li >？我可以用某种 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

我假设您在页面加载时为 #cities 下的元素分配 click 事件。

问题是，如果页面加载时这些元素不存在，它们就不会收到事件。

尝试使用 .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') 稍好一些>.