Onclick events not firing on elements arriving by ajax

Question

I have the following ajax query which returns html elements and places them inside a bootstrap modal:

$.get("ajax.parser.php?ajax_request=manageidentifiedcontact", function(data){
    $('#indentified-modal').html(data);
    $('#IdentifiedModal').modal('show');
});

I also have the following script to append a button to an element, whether it is contained on the static page or whether it arrives after an ajax query.

var newContactButton = '<span class="quick-add-contact input-group-addon"><a class="quick-add-contact-link" href="contact_update.php"><i class="fa fa-user-plus"></i>&nbsp; Add</a></span>';
$('.typeahead-field').append(newContactButton);
$(document).ajaxComplete(function() {
   $('.typeahead-field').each(function() {
      if (!$(this).find('.quick-add-contact').length) {
         $(this).append(newContactButton);
      }
   });
});

The button is appended properly in both cases as intended. The error that I now have is listening to an onclick event on the appended button.

var oldModalId = false;
var closestValueId = false;
var closestContactNameId = false;
$('.quick-add-contact').on('click', 'a', function (e) {
   e.stopPropagation();
   e.preventDefault();

   if ($('div.modal.in').attr('id') != 'quick-add-contact-modal') {
      if($('div.modal.in').length) {
        oldModalId = $('div.modal.in').attr('id');
        $('#'+oldModalId).modal('hide');
      }

      closestValueId = $(this).closest('.typeahead-field').find('input[type="hidden"]').attr('id');
      closestContactNameId = $(this).closest('.typeahead-field').find('input[type="text"]').attr('id');
      $('#quick-add-contact-modal').modal('show');
    }

});

This last snippet correctly fires for the buttons that were appended on the static page, but it does not work for the button that was appended after the ajax query.

Everything I read online suggests .on is the correct method, but for some reason it doesn't work in this case and I can't figure out why.

Any help appreciated.

EDIT :

I have also tried to use

$(document).on('click', '.quick-add-contact a', function (e) {

});

Works on none of the elements :

$(document).on('click', '.quick-add-contact-link', function (e) {

});

Works on none of the elements :

$(document).on('click', 'a', function (e) {

});

Works on all of my static 'a' elements, but none of the dynamically added ones.

I'm guessing the `.quick-add-contact` element is dynamically appended too? If so change `$('.quick-add-contact')` to `$(document)` — Rory McCrossan, Jun 23 '17 at 10:51
Classic mistake. The `.on` is not enough. You must attach it to the document `$(document).on('click', '.quick-add-contact', function ...` — TCHdvlp, Jun 23 '17 at 10:53
should be $(document).on('.quick-add-contact a','click', function (e) { }); — JYoThI, Jun 23 '17 at 10:53
Please see updates. I've tried all the mentioned answers but they do not work. — Rich, Jun 23 '17 at 11:00
@Rich where you put this function? which is mentioned in answers? — Curiousdev, Jun 23 '17 at 11:06
@Rich `quick-add-contact-link` this link has href `contact_update.php` so it'll be redirected to this page so it doesn't make any sense to bind click event on this element ? what you want to do with this click event actually? can you please give more info so i can understand — Curiousdev, Jun 23 '17 at 13:06

Alex Mac · Answer 1 · 2017-06-23T13:11:56.247

$(document).ready(function() {
    $('#addMore').click(function() {
        $.ajax({
            url: 'http://localhost//ajax/tryNow', // Please add your url here
            type: 'POST',
            dataType: 'json',
            success: function() {
                $('#links').append('<br><a href="" class="quick-add-contact"> Click Me </a>');
            }
        });
    });
});
$(document).on('click', '.quick-add-contact', function(e) {
    e.stopPropagation();
    e.preventDefault();
    alert($(this).html());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="addMore">Add More</a>
<div id="links">
    <a href="" class="quick-add-contact"> Click Me </a>
</div>

Please check below mentioned code, It will help you.

$(document).on('click','.quick-add-contact', function (e) {
        e.stopPropagation();
        e.preventDefault();
});

Let me know if it not works.

score 0 · Answer 2 · edited Jun 23 '17 at 10:53

0

Use

$(document).on("click", ".quick-add-contact", function(e) {
    //Your code
})

for the dynamic created elements

edited Jun 23 '17 at 10:53

Rory McCrossan

331,213
40
305
339

answered Jun 23 '17 at 10:52

Sagar Jajoriya

2,377
1
9
17

This does not work, neither does using .quick-add-contact-link in the filter – Rich Jun 23 '17 at 12:57

score 0 · Accepted Answer · answered Jun 23 '17 at 13:51

0

This is due to where I was appending the button. The typeahead container is actually being used by the typeahead plugin, which was conflicting with the click event. Moving my append outside of the container detects clicks as expected.

answered Jun 23 '17 at 13:51

Rich

183
3
14

Onclick events not firing on elements arriving by ajax

3 Answers3