jQuery - 按钮单击不起作用答案

【问题标题】：jQuery - Button click does not workjQuery - 按钮单击不起作用
【发布时间】：2018-05-02 12:29:18
【问题描述】：

这里真的很简单的问题，让我问它。我只是无法修复它。

在 ajax 调用中，我想显示一个项目列表。每个项目都有一个按钮。

所以我把这个 div 放在我的 HTML 中：

<div id="calendar">
  <div id="activity_wrapper">
    <h4 class="activity-name"></h4>
    <p class="activity_start"></p>
    <p class="activity_end"></p>
    <a class="start" id="start">Start Activity</a>
    <a class="finish">Complete Activity</a>
    <button id="delete-activity-button" class="delete" value="">Delete</button>
    <button id="modify-activity-button" class="modify" value="">Edit</button>
  </div>
</div>

现在在带有 Ajax 的 jQuery 中，我像这样创建列表：

$.each(data, function (index, activity) {
  var newActivity = activityDiv.clone();
  var startTime = new Date(activity.startDateTime);
  var endTime = new Date(activity.endDateTime);

  newActivity.find(".activity-name").text(activity.name);
  newActivity.find(".activity_start").text(startTime);
  newActivity.find(".activity_end").text(endTime);
  newActivity.find(".delete").val(activity.id);
  calendar.append(newActivity);
});

然后我终于有了这个 onclick：

$('.delete').click(function(e) {
  var selected = $(this).attr('class') || $(this).attr('id');
  var id = selected.val();
  alert(id);
});

点击不会注册。我究竟做错了什么？我相信这是由于我克隆活动类的方式。

谢谢。

【问题讨论】：

尝试删除$(this).attr('class') 我怀疑你正在上课并且没有value 是吗？
字符串怎么有val()方法？控制台中应该有一个大错误，即如果单击事件实际上附加到了元素。
你应该克隆元素本身 var newActivity = activity.clone();
即使我删除了点击中的所有代码并且只是发出警报，它也不起作用。
克隆不克隆点击事件

标签： javascript jquery html button click

【解决方案1】：

您不应该对包含 ID 的元素使用 clone()，因为 ID 应该是唯一的。此外，您的点击处理程序正在尝试使用由于多个相同 ID 而导致行为不一致的 ID。

Clone() 也不会克隆您附加到初始 div 的事件（除非您将其传递为“true”），因此您的点击处理程序不会触发，具体取决于您附加它的时间.最好将您的点击处理程序附加到父级：

$('#calendar').on( 'click', '.delete', function(e) { ... } );

因此您不必担心在每个活动中克隆事件。

【讨论】：