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

getting stuck with jquery in generating list items dynamically

本文关键字：遇到 jQuery 问题 动态 列表      更新时间：2023-09-26

这是脚本：

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

试试这个： 

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>

这是你想做的吗？

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

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

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

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

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

根据我从你的帖子中能够感知到的 你可以尝试以下代码来实现你想要的

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

相关文章：