Question 35795 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How can i make an event fire every time on button click – Jquery

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 class="btn">Add</button><br>
    <p class="error"></p>
    <div>
        <ul class="todos"></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 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("");
    }
});

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

Tags:

2

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0

    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 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search