Question

我正在做一个简单的NodeJS-MongoDB待办事项列表应用程序，其中添加的待办事项可以更新。单击编辑按钮时，我将相应的元素更改为表单以更新它。成功处理按下时的编辑按钮并将其转换为表单，而单击更新按钮时，事件侦听器不会处理它，并且会执行默认刷新操作。为什么呢？

Javascript Part：

$(document).ready(function(){
$('.update').on('click', function(){
      var id =  $(this).parent().find('input:hidden');
      var item = $(this).parent().find('input:text');
      var priority =$(this).parent().find('select option:selected');
      var todo = {item: item.val(), priority: priority.val()}
      $.ajax({
        type: 'PUT',
        url: '/todo/' + id.val(),
        data: todo,
        success: function(data){
          location.reload();
        }
      });
  });

$('.edit').on('click', function(){
    var id =  $(this).parent().find('input:hidden');
    var item = $(this).parent().find('b');
    $(this).parent().html(
        "<form>"+
        "<input type = 'text' name = 'item' value='" + item.text() + "' required />"+
        "<select name = 'priority' required>"+
        "<option value = 'high'> High </option>"+
        "<option value = 'medium'> Medium </option>"+
        "<option value = 'low'> Low </option>"+
        "</select>"+
        "<input type = 'hidden' value='" + id.val() + "'/>"+
        "<button class = 'update'> Update Item </button>"+
        "</form>");
  });
});

HTML部分：

<ul>
    <% for(var i=0; i < todos.length; i++){ %>
        <li>
        <input type = "hidden" value = <%= todos[i]._id %> /> 
        <b> <%= todos[i].item %> </b>
        <button class = "edit">  </button>
        </li>
    <% } %>
</ul>

Answer 1

我认为这将解决您的问题

$(document).on('click', '.update', function(){
    //Rest of your code
})

Answer 2

您可以console.log();仔细检查它是否进入。表单默认操作中的按钮将转换为您没有的表单的操作页面，并且您没有进行任何POST，GET等操作。表单，你是用ajax做的。如果您不想使用表单的功能，可以只按type=button按钮。如果您将来不使用该表单发布，获取或任何内容，删除表单标记是另一种选择。

修改

在得到其他答案后，我注意到可以通过混合我和他们的答案给出正确的答案。所以我决定也添加这部分。在创建DOM元素之前，您将使用onClick eventhandler。您必须在创建元素后提供事件处理程序。您的选择是：

在onClick的底部.update内添加整个.edit onClick。

将onClick事件处理程序提供给在任何javascript操作之前已经创建的对象。

$(document).on('click', '.update', function(){ //update's onClick actions here }

Answer 3

如果您的页面是动态创建类名为dosomething的元素，您可以将事件绑定到已存在的父级，通常是＆＃34; document＆＃34;

$(document).on('click', '.update', function(){
 // what you want to happen when click
 // occurs on elements that match '.update'
});

或者您可以使用父DOM元素，它始终保留在您的页面加载例如：

$('ul').on('click', '.update', function(){
 // do something here
});

为什么没有处理按钮点击事件？

3 个答案: