您的位置: 首页  >  技术问答  >  为什么直通工作只为这个jQuery上的其他项目做清单？

为什么直通工作只为这个jQuery上的其他项目做清单？

分类: 技术问答 • 2022-05-11 13:14:58
问题描述：

我正在创建一个jQuery来完成列表，我希望能够添加一个项目，然后点击复选框添加一个直通。最后，当我点击垃圾按钮时，附加的项目应该被删除。
只要我只添加一个项目，添加一个直通，然后删除该项目，代码就可以正常工作。
如果添加了更多项目，我仍然可以添加和删除项目，但是直通功能不适用于每个项目。似乎我只能选择偶数或奇数编号的项目作为直通。
我的代码如下，这里是一个working demo。作为编程世界的新手，您的帮助非常感谢！为什么直通工作只为这个jQuery上的其他项目做清单？

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>To Do List</title> 
    <link href="style.css" type="text/css" rel="stylesheet"> 
    <!--link for the font-awesome garbage bin icon --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
</head> 
<body> 
    <div class="main"> 
     <h1 class="title">To Do List</h1> 
     <form class="form-box"> 
      <input type="text" class="input-box" placeholder="Add An Item to Your To Do List" onclick="this.placeholder = ''" onblur="this.placeholder = 'Add An Item to Your To Do List'" > 
      <button type="submit" value="Add" class="input-button" name="input-button">Add</button> 
     </form> 
     <!-- A couple of commented-out sample divs that would be added on when <button> is clicked (see app.js)--> 
     <!--<div class="item-box"> 
      <h3 class="item-text">Lorem ipsum dolor sit amet</h3> 
      <input type="checkbox" class="checkbox"> 
      <i class="fa fa-trash fa-2x bin-button" aria-hidden="true"></i> 
     </div> 
     <div class="item-box"> 
      <h3 class="item-text strikethrough">Lorem ipsum dolor sit amet</h3> 
      <input type="checkbox" class="checkbox" checked> 
      <i class="fa fa-trash fa-2x bin-button" aria-hidden="true"></i> 
     </div>--> 
    </div> 
    <!-- JAVASCRIPT -->  
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
    <script src="app.js"></script> 
    <!-- End of JAVASCRIPT --> 
</body> 
</html>

jQuery的

$(document).ready(function() { 
    $(".input-button").click(function(evt){ 
     evt.preventDefault(); 
     var value = $(".input-box").val(); 
     var item = "<div class='item-box'> <h3 class='item-text'>" + value + "</h3> <input type='checkbox' class='checkbox'> <i class='fa fa-trash fa-2x bin-button' aria-hidden='true'></i> </div>"; 
     $(".main").append(item); 
     $(".bin-button").click(function() { 
      $(this).parent().remove(); 
     }); 
     $(".checkbox").click(function() { 
      $(this).prev().toggleClass("strikethrough"); 
     }); 
    }); 
});

CSS

* { 
    box-sizing: border-box; 
} 

body { 
    background-color: #666; 
    font-size: 1em; 
    width: 100%; 
} 

.main { 
    margin: 20px; 
} 

.title { 
    margin-top: 20px; 
    margin-bottom: 50px; 
    text-decoration: underline; 
} 

.form-box { 
    width: 40%; 
    margin: 0 auto 50px auto; 
    height: auto; 
} 

.input-box { 
    width: 50%; 
    display: block; 
    margin: 20px auto 0 auto; 
} 

.input-button { 
    width: 10%; 
    display: block; 
    margin: 20px auto 20px auto; 
} 

/* styling for div items added through jQuery */ 

.item-box { 
    width: 40%; 
    height: 50px; 
    margin: 0 auto; 
    margin-bottom: 10px; 
    clear: both; 
} 

.item-box h3, input, i { 
    display: inline-block; 
} 

.item-box h3 { 
    margin-top: 15px; 
} 

.item-box input { 
    margin-top: 18.5px; 
} 

.item-box i { 
    margin-top: 9px; 
} 

.item-box input, i { 
    float: right; 

} 

.bin-button { 
    margin-right: 10px; 
} 

/* Typography */ 

h1.title { 
    font-family: sans-serif; 
    font-size: 3rem; 
    text-align: center; 
} 

h3.item-text { 
    font-size: 1.3rem; 
    font-family: sans-serif; 
    font-weight: bold; 
    letter-spacing: 0.1rem; 
} 

h3.strikethrough { 
    text-decoration: line-through; 
}

答

你应该申报的复选框”在输入框的点击功能范围之外的点击功能。此外，因为您的复选框是动态生成的，你将要使用的语法如下：

$(document).on('click','.checkbox',function() { 
    $(this).prev().toggleClass("strikethrough"); 
}

因此，你整个jQuery代码应该是这个样子：

$(document).ready(function() { 
    $(".input-button").click(function(evt){ 
     evt.preventDefault(); 
     var value = $(".input-box").val(); 
     var item = "<div class='item-box'> <h3 class='item-text'>" + value + "</h3> <input type='checkbox' class='checkbox'> <i class='fa fa-trash fa-2x bin-button' aria-hidden='true'></i> </div>"; 
     $(".main").append($(item)); 
    }); 
    $(document).on("click", ".bin-button", function() { 
     $(this).parent().remove(); 
    }); 
    $(document).on("click", ".checkbox", function() { 
     $(this).prev().toggleClass("strikethrough"); 
    }); 
});

答

这是因为你重新注册许多，许多事件与这段代码：

$(".bin-button").click(function() { 
     $(this).parent().remove(); 
    }); 
    $(".checkbox").click(function() { 
     ... 
    });

所以每个待办事项加入，注册到该复选框事件的数量会增加。

例如：第一个待办事项，生活很好，一个事件被注册。第二个待办事项本身会正常工作，但第一个待办事项现在有两个事件绑定到该复选框。这意味着toggleClass被调用两次。

例如，做somethign像这将表明，点击事件被触发多次：

let called = 0; 
$(document).ready(function() { 
    $(".input-button").click(function(evt){ 
     evt.preventDefault(); 
     var value = $(".input-box").val(); 
     var item = "<div class='item-box'> <h3 class='item-text'>" + value + "</h3> <input type='checkbox' class='checkbox'> <i class='fa fa-trash fa-2x bin-button' aria-hidden='true'></i> </div>"; 
     $(".main").append(item); 
     $(".bin-button").click(function() { 
      $(this).parent().remove(); 
     }); 
     $(".checkbox").click(function() { 
     called++; 
      $(this).prev().toggleClass("strikethrough"); 
     console.log(called); 
     }); 
    }); 
});

您可以改为创建使用$(item)和追加点击事件，该元素的元素将其添加到前dom。例如：

let called = 0; 
$(document).ready(function() { 
    $(".input-button").click(function(evt){ 
     evt.preventDefault(); 
     var value = $(".input-box").val(); 
     var item = $("<div class='item-box'> <h3 class='item-text'>" + value + "</h3> <input type='checkbox' class='checkbox'> <i class='fa fa-trash fa-2x bin-button' aria-hidden='true'></i> </div>"); 
    item.find(".bin-button").click(function() { 
      $(this).parent().remove(); 
     }); 
    item.find(".checkbox").click(function() { 
     called++; 
      $(this).prev().toggleClass("strikethrough"); 
     console.log(called); 
     }); 
     $(".main").append(item); 
    }); 
});

相关推荐