jQuery - 按钮单击不起作用

时间:2017-11-19 00:20:15

标签: javascript jquery html button click

这里真的很简单的问题,让我去问它。我无法解决它。

在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);
});

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

感谢。

1 个答案:

答案 0 :(得分:0)

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

克隆()也不会克隆您附加到初始div的事件(除非您通过它&#39; true&#39;),因此您的点击处理程序不是&#39;要点火,取决于你何时附上它。最好将点击处理程序附加到父级:

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

所以你不必担心在每项活动中克隆事件。