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

现有代码存在问题：

您正在执行$('#listview').attr('class','item');，这会将课程添加到ul而不是新创建的li
由于li元素已动态添加到DOM，只需将click事件与.click()绑定即不起作用，您必须使用事件委派，.on()建议使用这种方法。
$(this).addClass什么都不做，也许你打算写$(this).addClass('selected');

Answer 4

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

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

Answer 5

这是你想要做的吗？

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

每次添加新列表项时，都需要应用click事件。否则jQuery不会点亮该特定项目的事件。

在动态生成列表项时遇到jquery问题

5 个答案: