Question

我有一个页面，显示用户创建的项目列表。一个这样的项目的（简化）HTML如下：

<div class="lesson-index-view">
  <div class="header">
    <h2>
      <a href="#">{{ object.title }}</a>
      <span class="right">
        <a class="template-edit-btn" title="Bewerk" href="#">edit</a>
        <a class="template-delete-btn" title="Verwijder" href="#">delete</a>
      </span>
    </h2>
  </div>

  <div class="template-view-details">
    <div class="body clearfix">
      {{ body content here }}
    </div>
  </div>
</div>

这些项目包含在包含id="lesson-list"设置的div中。

现在我在jQuery中定义了以下事件监听器：

$('#lesson-list').on('click', '.template-edit-btn', {formSelector: '#edit-template-form-container'}, showForm);

现在这个处理程序在页面加载时可用的项目上运行得很好。但是，每当我插入一个AJAX调用结果的新项时，事件处理程序都不起作用，而是调用另一个事件监听器的处理程序：

$('#lesson-list').on('click', '.header', toggleTemplateView);

由于事件冒泡，这可能是预期的行为，但在第一个事件监听器的showForm()方法中，我特别调用e.stopPropagation()，如下所示：

function showForm(e) {
  console.log('showForm() called');
  var submitURL, templateTitle, templateDescription, template;
  e.stopPropagation();
  -- more code here --

所以我会说事件不应该到达第二个处理程序（它当前正在执行）。

我在这里缺少什么？

更新

我非常抱歉，我犯了一个错误。我做了一个完整的缓存刷新，看起来问题似乎与我第一次遇到的问题相反。虽然新创建（通过AJAX）元素，但现有元素不响应事件监听器！

当我使用Chrome工具栏检查元素时，我可以看到事件处理程序绑定到现有元素和新元素，所以我在这里有点困惑......

jQuery事件处理程序不处理插入AJAX的元素

更新

0 个答案: