Javascript alert not working for a particular function

Question

I am passing a table with a button in drupal 7 and trying to print the values but iam not getting any alert

$(document).ready(function() {
  $('#edit-title-poc').change(function() {
    alert('sdsd'); //**this alert works** 
    var poc_valueasdasd = $("#edit-title-poc option").filter(":selected").val();
    $.ajax({
      url: Drupal.settings.basePath + 'ajaxpocsdas3',
      data: {
        pocdasd: poc_valueasdasd
      },
      success: function(aasdsabc) {
        //data: value returned from server
        $('#msg-diasdsadsad').html(aasdsabc);
      }
    });
  });

  $('#poc3modulepdf-generator').click(function() {
    alert("Handler for .click() called."); //this alert is not working
  });
});

This is the screen shot

https://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements — Arun P Johny, Feb 26 '18 at 09:12
whether the element `poc3modulepdf-generator` is added by `$('#msg-diasdsadsad').html(aasdsabc);` — Arun P Johny, Feb 26 '18 at 09:13
Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Zenoo, Feb 26 '18 at 09:13
You need to also specifiy the `name` of the button as well as the `id` — Rafael, Feb 26 '18 at 09:15
$('#poc3modulepdf-generator').on('click', function(e) { alert("Handler for .click() called."); }); — M.Nabeel, Feb 26 '18 at 09:16
Either move `$('#poc3modulepdf-generator').click` into the success callback or use event delegation. — t.niese, Feb 26 '18 at 09:17
@M.Nabeel `$('#poc3modulepdf-generator').on('click',` and `('#poc3modulepdf-generator').click(` are equivalent. So this won't solve the problem. — t.niese, Feb 26 '18 at 09:17

Farhan Haque · Accepted Answer · 2018-02-26T09:29:04.810

0

Use

$(document).on('click','#poc3modulepdf-generator',function(){
    alert('clicked')
})

The reason why your code is not working is because you are binding an event to the element which is not yet created.

Using $(document).on('click','#poc3modulepdf-generator') will bind the event to document. This is event delegation. For more details on event delegation see here

I hope this will help.

edited Feb 26 '18 at 09:29

answered Feb 26 '18 at 09:18

Farhan Haque

991
1
9
21

1

When writing an answer you have to explain why this will work and why it won't work with the code of the OP. – t.niese Feb 26 '18 at 09:20

Javascript alert not working for a particular function

1 Answers1