0

これはスクリプトです：

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

上記のコードを使用して、順序付けされていないリスト項目を動的に生成できました。しかし、動的クラス (クラスは

4

5 に答える 5

0

これはあなたがやろうとしていることですか？

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

新しいリスト項目を追加するたびに、クリック イベントを適用する必要があります。それ以外の場合、jQuery はその特定のアイテムのイベントに応答しません。

于 2012-06-20T10:14:56.443 に答える
0

これを試して ： 

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>
于 2012-06-20T10:08:50.437 に答える
0 
$(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);
    });
});
于 2012-06-20T10:09:20.670 に答える
0

あなたの投稿から私が認識できたことに基づいて、次のコードを試して、目的を達成することができます

$(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');たクラスではなく、クラスを追加することを行っていますulli

  2. li要素が動的に DOM に追加されているため、イベントをバインドするだけでclickは.click()機能しません。イベントの委任を使用する必要があり、そのために.on()メソッドを使用することをお勧めします。

  3. $(this).addClass何もしません、多分あなたは書くつもりでした$(this).addClass('selected');

于 2012-06-20T10:09:40.190 に答える
0

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");
});
于 2012-06-20T10:10:00.890 に答える