Jquery: Stopping after 1st click

Question

I am trying to implement edit functionality for a HTML element.

Right now my html-pug code is as below

div
    label(for="todo" id="todo" + index class="ind-todo-list") test1

        button(type="submit" id="todo" + index class="btn" onclick="editTodo()" ) Edit
        button(type="submit" id="todo" + index class="btn" onclick="deleteTodo()" ) Delete

Jquery is as below

$(document).ready(function() {
    $(".ind-todo-list").on("click" , function(){ 
        var todoid = $(this).attr("id"); 
        var newInput = document.createElement("input");
        newInput.type="text";
        newInput.name="todo";  

        $("#" + todoid).html(newInput);
      });
  });

But everytime I am clicking at the test1 my page reloading again even after input field added.

What I am trying to achieve is - when I click at test1, I will have input box opened, where I can edit the test1 and save changes. But I am stuck here.

Thank you.

Edit 1

I have added event.preventDefault() but still experiencing same same

$(document).ready(function() {

                    $(".ind-todo-list").on("click" , function(event){
                        event.preventDefault(); 
                        var todoid = $(this).attr("id"); 
                        console.log("Todoid " + todoid);
                        console.log($("#" + todoid).html());
                        var newInput = document.createElement("input");
                        newInput.type="text";
                        newInput.name="todo";  
                        //newInput.id=todoid;  
                        //$("#" + todoid).html("<input type='text' name='todo' id='"+todoid+"'>");
                        $("#" + todoid).html(newInput);

                    });

Edit 2 - ID fix

div
    label(for="todo" id="todo" + index class="ind-todo-list") #{todo.todo}

        button(type="submit" id="todoedit" + index class="btn" ) Edit
        button(type="submit" id="tododeleteq" + index class="btn" ) Delete

Does this answer your question? [Access event to call preventdefault from custom function originating from onclick attribute of tag](https://stackoverflow.com/questions/8614438/access-event-to-call-preventdefault-from-custom-function-originating-from-onclic) — WOUNDEDStevenJones, May 22 '20 at 16:50
You'll need to call `e.preventDefault()`, because without that your form submits because that's the default `button` functionality. — WOUNDEDStevenJones, May 22 '20 at 16:51
Note that it's invalid HTML to have more than one of the same `id` attribute. IDs must each be unique within a document. — Sean, May 22 '20 at 21:01

score 1 · Answer 1 · answered May 22 '20 at 16:51

1

$(".ind-todo-list").on("click" , function(e){ 
//add an event to prevent default action on the element       
 e.preventDefault();

      });
  });

answered May 22 '20 at 16:51

snoopy

105
2
10

1

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. – β.εηοιτ.βε May 22 '20 at 17:42

Jquery: Stopping after 1st click

Edit 1

Edit 2 - ID fix

1 Answers1