在JQuery中更改新添加的元素

时间:2015-03-23 18:44:08

标签: jquery

所以当我检查原来的盒子时,它们会消失。但是当您切换列表并出现新复选框时,当您检查它时它不会消失。为什么呢?

编辑:我对代码进行了更改以反映答案。我现在想知道为什么默认情况下文本框会在按Enter键时删除,但是出现的新文本框不会删除?



$(document).ready(function() {
    
    $(document).on("click",".items",function() {
        $(this).remove();
    });
    
    $("li").click(function () {
        $("li").removeAttr("class");
        $(this).attr("class","selectedlist");
        $(".items").remove();
        $("#itemsbar").append('<div class=\"items\" id=\"c1div\"><input type=\"checkbox\" id=\"c1\" name=\"c1\" /> \
        <label for=\"c1\"><span></span>New Box~</label></div>');
    });
    
    $("#itemsbar > p").click(function () {
        $(this).remove();
        $("#itemsbar").append('<input class=/"addnew/" type=/"text/"></input>');
    });
    
    $(document).on("keyup",'.addnew', function (e) {
        if (e.which == 13) {
            $(this).remove();
            e.preventDefault();
        }
    });
    
});
&#13;
<div id="main">
    <div id="listsbar">
        <h1>To Do List</h1>
        <ul id="lists">
            <li id="l1" class="selectedlist">Test List</a></li>
            <li id="l2">Test List 2</a></li>
        </ul>
    </div>
    <div id="itemsbar">
        <div class="items" id="c1div"><input type="checkbox" id="c1" name="c1" />
        <label for="c1"><span></span>Check Box 1</label></div>
        <div class="items" id="c2div"><input type="checkbox" id="c2" name="c2" />
        <label for="c2"><span></span>Check Box 2</label></div>
        <p>Click to Add</p>
        <input class="addnew" type="text"></input>
    </div>
</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:2)

更改

$(".items").click(function () {

 $(document).on("click",".items",function() {

您正准备好文档上的文档上的文档,因此当您启用新项目时,它不会绑定该项目。