在动态生成列表项时被 jquery 卡住了

【问题标题】：getting stuck with jquery in generating list items dynamically在动态生成列表项时被 jquery 卡住了
【发布时间】：2012-06-20 18:35:05
【问题描述】：

这是脚本：

<script type="text/javascript">
    var classname="";
    $(document).ready(function(){
        $("#submit").click(function(){ 
            name=$("input#name").val();
            $("#listview").append("<li>"+name+"</li>");
            $('#listview').attr('class','item'); 
        });

        $("li.item").click(function(){
            $(li.item).removeClass("selected");
            $(this).addClass
        });
    });
</script>
<style type="text/css">
    .selected { background-color:red;width:20px;}
</style>

这是html代码：

<ul  id="listview" >
   data
</ul>

使用上面的代码，我能够动态生成无序列表项。但是我无法在动态类的帮助下将 css 类添加到动态列表项中（类用于

【问题讨论】：

请完成您的问题...
请将其中一个答案标记为正确的。

标签： javascript jquery html css

【解决方案1】：

试试这个：

var classname="";    
 $(document).ready(function(){

    $("#submit").click(function(){    
     name=$("input#name").val();
     $("#listview").append("<li class='item'>"+name+"</li>");
   });

   $("li.item").click(function(){    
      $("li.item").removeClass("selected");
      $(this).addClass("selected");    
  });
});
</script>

【讨论】：

不会起作用，因为在添加实际
元素之前添加了点击事件。您需要在 $('#submit').click() 事件中添加 $('li.item').click() 事件。

【解决方案2】：

这是你想要做的吗？

http://jsfiddle.net/Wd887/3/

每次添加新列表项时，您都需要应用点击事件。否则 jQuery 将不会关注该特定项目上的事件。

【讨论】：

【解决方案3】：

$(document).ready(function(){
    var clickEventHandler = function(){
        //remove class from previously clicked elements.
        $(".selected").removeClass("selected");
        //add it to the current element.
        $(this).addClass("selected");
    }       

    $("#submit").click(function(){ 
        var name=$("input#name").val(),
            ul = $("#listview");

        //generate li with jquery add a click handler to it.
        $("<li/>", {'class': "mc" })
                           .appendTo(ul)
                           .click(clickEventHandler);
    });
});

【讨论】：

【解决方案4】：

您需要将事件附加到动态创建的列表项，而不是直接使用.bind()定义点击事件：

$("li.item").bind("click", function(event){
    event.preventDefault();
    $(li.item).removeClass("selected");
    $(this).addClass("otherclass");
});

【讨论】：

不要使用 jQuery live() 方法。它很糟糕，并且已被 jQuery 弃用。他们仍然支持它，但只是为了向后兼容。阅读本文了解更多信息：ultimatewebtips.com/why-jquery-live-is-a-bad-option-to-use

【解决方案5】：

根据我从您的帖子中了解到的内容您可以尝试以下代码来实现您想要的效果

$(document).ready(function(){
        $("#submit").click(function(e){ 
           // if #submit is a submit button then You have to prevent
           // the default behavior or page will reload
           // you can do that by uncommenting following line
           // e.preventDefault();
            name=$("input#name").val();
            $("#listview").append("<li class='item'>"+name+"</li>");
        });

        $("ul#listview").on('click','li.item',function(){
            $('li.item').removeClass("selected");
            $(this).addClass('selected');
        });
    });

您现有代码的问题：

您正在执行$('#listview').attr('class','item');，这会将类添加到ul，而不是新创建的li
$(this).addClass 什么都不做，也许你打算写$(this).addClass('selected');

【讨论】：

非常感谢:)。我现在明白了:)