jQuery - Button click does not work

Question

Really simple question here, kills me to ask it. I just cannot fix it.

In an ajax call I want to show a list of items. Each item will have a button.

So I put this div in my 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>

Now in jQuery with Ajax I create the list like so:

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

Then finally I have this onclick:

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

The click will not register. What am I doing wrong? I believe it is due the way I clone the activity class.

Thanks.

Try removing the `$(this).attr('class')` I suspect you are getting a class and that doesn't have an `value` does it? — Forbs, Nov 19 '17 at 00:23
How does a string have a val() method? Should have a big error in the console that is if the click event is actually attached tot he element. — epascarello, Nov 19 '17 at 00:25
you should clone the element itself var newActivity = activity.clone(); — samehanwar, Nov 19 '17 at 00:28
Even if i remove all code inside the on click and just have an alert it does not work. — jackabe, Nov 19 '17 at 00:41
Because the click is not magically attached, you got to tell it to be — epascarello, Nov 19 '17 at 00:50
https://stackoverflow.com/questions/11753579/jquery-clone-loses-click-event — epascarello, Nov 19 '17 at 00:51
Or https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — epascarello, Nov 19 '17 at 00:52

score 0 · Answer 1 · answered Nov 19 '17 at 01:38

You shouldn't use clone() on elements containing IDs since IDs should be unique. Also, your click handler is trying to work with the ID which is going to have inconsistent behaviour because of the multiple identical IDs.

Clone() also isn't going to clone the events you've attached to your initial div (unless you pass it 'true'), so your click handler isn't going to fire, depending on when you attached it. It would be better to attach your click handler to the parent:

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

so you don't have to worry about cloning the event on every activity.

jQuery - Button click does not work

1 Answers1