Question

我只是尝试使用jQuery将字符串附加到现有DOM元素。我以前做了1000次，但由于某些原因我的代码行为不端。以下示例完全按照预期工作：

<input type="submit" id="submit" value="submit" />

<ul id="myList">
    <li>first list item</li>
    <li>second list item</li>
    <li>third list item</li>
</ul>

<script>
    $('#submit').click(function(){
        $('#myList').append('<li>fourth list item</li>');
        //alert('Here I am');
    });
</script>

现在，在我的应用程序中，我正在动态呈现无序列表和关联的li，这在以前从未出现过问题。我似乎无法弄清楚为什么我的click函数没有附加到myList对象。我甚至直接从FireBug控制台尝试了以下内容：

>>$('#myList').hide()

再没有任何反应。我确认DOM元素id“myList”存在，我只是无法操纵或与之交互。调试这样的东西的最佳方法是什么？

提前致谢！

Answer 1

~~如果您动态生成ul，则需要使用jQuery live：~~

<input type="submit" id="submit" value="submit" /> <lu id="myList"> <li>first list item</li> <li>second list item</li> <li>third list item</li> </lu> <script> $('#submit').live('click',function(){ $('#myList').append('<li>fourth list item</li>'); //alert('Here I am'); }); </script>

<击> 修改

唉，live()似乎没有什么区别：http://jsfiddle.net/citizenconn/YBZSJ/

也许尝试使用firebug：

alert($);

只是为了确保你正确地调用它。请注意，如果你打电话给$('#myList').hide();没有任何反应，但是如果你在元素本身上调用hide()就可以了。

我将这个答案留在这里供参考。

Answer 2

你的意思是<ul>正如其他人所说的那样。 <lu>不是HTML代码。

您的问题可能是由于创建了与页面上现有元素具有相同Id的多个列表而导致的。 Id必须是唯一的才能使用，因为如果按Id选择，jQuery可能只选择一个元素。更不用说您的代码无效，CSS和DOM操作都可能产生意外结果。如果您一次在页面上有多个这样的列表，则应该将其设为类而不是id，或者如果它们都具有相同的父级，请为该父级提供一个想法并使用它来选择<ul>小号

Answer 3

其他海报是正确的，您需要一个面向未来的事件观察者，因为您正在动态创建元素，并且需要在创建后附加绑定。话虽如此，live()非常昂贵。代表的速度比live()快3倍：

试试这个：

$(document.body).delegate('#submit','click',function(){
    $('#myList').hide();
});

基准证据：http://jsperf.com/jquery-live-vs-jquery-delegate/15

Answer 4

Works fine for me

此外，您的<lu>代表<ul>。

Answer 5

您有lu而不是ul

<lu id="myList">
    <li>first list item</li>
    <li>second list item</li>
    <li>third list item</li>
</lu>

Answer 6

试试这个（.live（）而不是.click（））：

$('#submit').live('click', function(){
    $('#myList').append('<li>fourth list item</li>');
    //alert('Here I am');
});

无法使用jQuery访问DOM元素

6 个答案: