Jquery：第一次点击后停止

Question

我正在尝试为 HTML 元素实现编辑功能。

现在我的 html-pug 代码如下

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如下

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

但每次我点击test1 时，我的页面都会重新加载，即使在添加了input 字段之后也是如此。

我想要实现的是 - 当我点击test1 时，我会打开输入框，我可以在其中编辑test1 并保存更改。但是我被困在这里了。

谢谢。

编辑 1

我添加了event.preventDefault()，但仍然遇到同样的情况

$(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);

                    });

编辑 2 - ID 修复

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

Answer 1

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

      });
  });