每次單擊按鈕時如何觸發事件

Question

我試圖讓相同的事件每次都觸發，但當我單擊“刪除”按鈕時它只觸發一次

HTML

    <input type="text" name="todoInput" id="todoInput">
    <button class="btn">Add</button><br>
    <p class="error"></p>
    <div>
        <ul class="todos"></ul>
    </div>

查詢

var todos = [];

$(".btn").click(function() {
    if ($("#todoInput").val().length != 0) {
        todos.push($("#todoInput").val());
        $("#todoInput").val("");
        console.log("Novi array:", todos);
        $(".todos").html("");
        $(todos).each(function(index, val) {
            $(".todos").append(`<li value=${val}>${val}<button class="del" value=${index}>del</button></li>`);
        });

        **$(".del").click(function() {
            todos.splice($(this).val(), 1);
            $(".todos").html("");
            $(todos).each(function(index, val) {
                $(".todos").append(`<li value=${val}>${val}<button class="del" value=${index}>del</button></li>`);
            });**
        });
    } else {
        $(".error").text("Molimo unesite vrijednost.");
        console.log("Trenutni array:" ,todos);
    }
});

$("#todoInput").on("input", function() {
    if ($("#todoInput").val().length != 0 && $(".error").text("Molimo unesite vrijednost.")) {
        $(".error").text("");
    }
});

我試圖讓相同的事件每次都觸發，但當我單擊“刪除”按鈕時它只觸發一次

Answer 1

我們實際上使用開/關點擊來確保點擊觸發事件。 $(".btn").off ('點擊').on('點擊',function() {...}

Answer 2

您遇到的問題是(".del").click(function() {函數沒有重復運行，因此沒有將onclick處理程序綁定到它。

也許另一種方法是創建刪除函數並傳入要刪除的項目的索引，請參見下面的代碼片段：

 let todos = []; function buildItems() { if (todos.length > 0) { $(".todos").html(""); $(todos).each(function(index, val) { $(".todos").append(`<li value=${val}>${val}<button class="del" onclick="deleteItem(${index});" value=${index}>del</button></li>`); }) } else { $(".todos").html(""); } } function deleteItem(index) { todos.splice(index, 1); buildItems(); } $(".btn").click(function() { if ($("#todoInput").val().length.= 0) { todos.push($("#todoInput");val()). $("#todoInput");val(""). // console:log("Novi array,"; todos). buildItems() } else { $(".error").text("Molimo unesite vrijednost;"). console:log("Trenutni array,"; todos); } }). $("#todoInput"),on("input". function() { if ($("#todoInput").val().length.= 0 && $(".error").text("Molimo unesite vrijednost.")) { $(";error");text(""); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" name="todoInput" id="todoInput"> <button class="btn">Add</button><br> <p class="error"></p> <div> <ul class="todos"></ul> </div>