jQuery on click starts working correctly after second button click

Question

I have this div:

<div id="addContactList"></div>

I use AJAX and change its innerHTML with something like:

  <div id="<%= data[i].id %>">
    <img src="<%= picture %>">
    <button class="addAsFriend">Add as Friend</button>
  </div>

In my JS, I have

$('#addContactList').on('click', '.addAsFriend', function () {
  $(this).text('Request sent!');
  $(this).attr('disabled','disabled');
});

What happens is that when I click on a button for the first time, I see that the click function ran; "Request sent!" is being shown but it immediately reverts back to the initial button. When I click a second time, it works fine.

I tried using event.stopPropagation and preventDefault but same issue happens.

As stated, it probably comes from the AJAX part:

Basically, I have 3 input fields on a page, and users can enter data in them. If there is data in the fields, they are posted and I use the data to query the database. There is a delay function of 250ms to prevent posting immediately every time a letter is typed.

var addContactsList = document.getElementById('addContactList');

$('#addContactForm').on('keyup change', function () {
  var self = this;

  // Add a short delay to not post for every letter typed quickly
  delay(function() {
    var userSearchData = {};
    userSearchData.userId = 23;

    $.each(['email', 'username', 'fullName'], function (_, el) {
      var val = $(self).find('input[name="' + el + '"]').val();
      if (val.length >= 3) {
        userSearchData[el] = val;
      }
    });

    if ( !isEmpty(userSearchData) ) {
      $.post('/post/addContact', { userSearchData: userSearchData }, function (data) {
        if (data) {
          new EJS({url: '/templates/addAContact.ejs'}).update('addContactList', { data: data })
        } else {
          addContactsList.innerHTML = '';
        }
      });
    } else {
      addContactsList.innerHTML = '';
    }
  }, 225 );

});

Probably not related but you should have a closing `/` in your `` tag: `` — TylerH, Apr 08 '14 at 19:35
TylerH, that is incorrect. http://stackoverflow.com/questions/3558119/are-self-closing-tags-valid-in-html5 — David Stetler, Apr 08 '14 at 19:37
Just a sidenote: use `$(this).prop('disabled',true);` instead of `$(this).attr('disabled','disabled');` — Satpal, Apr 08 '14 at 19:39
when you say the button reverts, do you mean the text changes back to "Add as friend"? — David Stetler, Apr 08 '14 at 19:40
@DanyP i think you may have used event.stopPropagation wrong, as it looks to me the only way what you're describing would have happened is the event propagating to `#addContactForm`'s change handler. Could you post how you attempted it(the stop propagation) — Rooster, Apr 08 '14 at 19:43
@Freak_Droid When doing this my $(this) is not associated to the button. "Request sent!" will be seen at the place of the .addAsFriend div, then the buttons reappear, and if I click again, it works. — Dan P., Apr 08 '14 at 19:47
@DanyP besides possibly using event.stopPropagation wrong, are you sure your delay function isn't running still when you click the button? — Rooster, Apr 08 '14 at 19:49
@Rooster I tried waiting a few seconds to make sure, and it still happens. I'll try event.stopPropagation again — Dan P., Apr 08 '14 at 19:50
I agree with Rooster, sounds like the function is firing more than once. take a look here http://stackoverflow.com/questions/1909441/jquery-keyup-delay — David Stetler, Apr 08 '14 at 19:54
I'm using it like this: `$('#addContactList').on('click', '.addAsFriend', function (event) { event.stopPropagation();` — Dan P., Apr 08 '14 at 19:54
@DanyP well if thats the case, I think youre next step is reproducing in a jsfiddle for people to play with. THey have the ajax echo api, or you could simulate the ajax. — Rooster, Apr 08 '14 at 19:55
Here it is : http://jsfiddle.net/qdP3j/ Enter at least 3 chars in any of the fields, then click a button. — Dan P., Apr 08 '14 at 20:16
Oh I get it, it's because of the "keyup change", I only use "keyup" now. Change was being triggered again when clicking elsewhere. Now though I have the problem when people use the autocomplete feature using the mouse, it will not trigger because there is no more `change`. — Dan P., Apr 08 '14 at 20:22

score 0 · Answer 1 · answered Apr 08 '14 at 20:23

0

It's because of the "keyup change". Change was being triggered again when clicking elsewhere (the add friend button).

Now though the problem is when people use the autocomplete feature using the mouse, it will not trigger because change isn't there anymore.

answered Apr 08 '14 at 20:23

Dan P.

1,707
4
29
57

you can keep the change if you change your selector to `$('#addContactForm input').on('keyup change', function (e) {` – Rooster Apr 08 '14 at 20:25

score 0 · Answer 2 · answered Apr 08 '14 at 20:46

As you noticed, the change event fires when your input field loses focus (when you click on the button). You can keep the change event, and check if the change event is firing while the input field is focussed

$('#addContactForm').on('keyup change', function () {
        if (!$(document.activeElement).is('input')) return; //add this line

jQuery on click starts working correctly after second button click

2 Answers2