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

Question

这是脚本：

<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 类添加到动态列表项中（类用于

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

Answer 2

$(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);
    });
});

Answer 3

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

$(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');
        });
    });

您现有代码的问题：

1. 你正在做$('#listview').attr('class','item');这会将类添加到ul不是新创建的li

2. 由于li元素是动态添加到 DOM 中的，简单地绑定click事件是.click()行不通的，你必须使用事件委托，.on()建议使用方法来做到这一点。

3. $(this).addClass什么都不做，也许你打算写$(this).addClass('selected');

Answer 4

You need to attach the event to the dynamically created list items, not defining there click event directly using .bind():

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

Answer 5

这是你想要做的吗？

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

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