How can i make an event fire every time on button click-CodePudding

im trying to make and the same event fire every time but it only fires once when i click "del" button

HTML

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

jQuery

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  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  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("");
    }
});

im trying to make and the same event fire every time but it only fires once when i click "del" button

CodePudding user response：

We actually use on/off click to make sure the click triggers the event. $(".btn").off ('click').on('click',function() {...}

CodePudding user response：

The issie you have is that the (".del").click(function() { function is not running repeatedly and therefore not binding the onclick handler to it.

Perhaps an alternative method would be to create the delete function and pass in the the index of the item to delete, see below snippet:

let todos = [];

function buildItems() {
  if (todos.length > 0) {
    $(".todos").html("");
    $(todos).each(function(index, val) {
      $(".todos").append(`<li value=${val}>${val}<button  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 >Add</button><br>
<p ></p>
<div>
  <ul ></ul>
</div>