onClick not working on ajax generated content

Question

My code doesn't show errors, but also doesn't work as it should. The output from the ajax call is working fine but I just can't get anything out of the onClick, no errors message, nothing.

The HTML

<div id="serials"></div>
<div id="accounts_info_key" style="text-align:left"></div>

The Ajax call

$(document).ready(function() { 
$('.tab2').click(function(){
        var account_id = $('#account_id').val();
              $.ajax({
                 url: 'ajax/account_info_serials_ajax.php',
                 type:'POST',
                 dataType: 'json',
                 data: 'account_id='+account_id,
                        success: function(response){
                $('#serials').html(response.table),
                $('#accounts_info_key').html(response.key),
                $('.drop_down').hide();
                },
              error:function (xhr, ajaxOptions, thrownError){
              alert(thrownError);
               } // End of success function of ajax form
              }); //end of ajax
       });//close trigger
  });//close whole function

The PHP

   $response = '';
   $response .='<div class="question">';
   $response .='plop';

   $response .='</div>';
   $response .='<div class="drop_down">';
   $response .='bob';
   $response .='</div>';

   $output_array = array(
              'table' => $response,
              'key' => $key,
              'count' => $count 
    );

  echo json_encode($output_array);

The jquery onclick

$(document).ready(function() {  
    $('#serials').on("click", ".question", function(e){
        alert('smeg');  
    });
});

Please note, I am not asking how to do it, I am asking why my version is not working, it is NOT a duplicate question

Which `.click()`? The `.tab2` click or the `#serials` click? — War10ck, Mar 11 '14 at 16:37
I have checked those and the answer isn't there. I am not asking how to do it, I am asking why mine isn't working — tatty27, Mar 11 '14 at 16:40
When the ajax completes, inspect the DOM using the browser's developer tools. Are you sure `
` is appending to `#serials` correctly? — War10ck, Mar 11 '14 at 16:44

The CodePunker · Accepted Answer · 2014-03-11T17:10:26.597

I have created a fiddle that shows how it should be done in my opinion http://jsfiddle.net/6VtA8/.

$(document).ready(function () {
    $('.tab2').click(function () {
        var account_id = $('#account_id').val();
        $.ajax({
            url: '/echo/json/',
            type: 'POST',
            dataType: 'json',
            data: {'something':'else'}
        }).done( function (response) { $('#serials').html('<div class="question ">abcd</div>'); });
    });
}); //close whole function 

$(document).ready(function () {
    $('#serials').on("click", ".question", function (e) {
        alert('smeg');
    });
});

There are multiple reasons that could cause your code to not work. It could even be the fact that your div (from some css rule) would end up having a height of 0 and therefore the event wouldn't trigger. So instead of debugging I chose to do a little rewriting.

hi, I have class="tab2" for response, does it work? $('#serials').html('
abcd
'); — jafar pinjar, Jan 24 '19 at 12:29

score 0 · Answer 2 · answered Mar 11 '14 at 16:40

0

You have to subscribe to the event click on #serials once it's in the dom. So when your ajax callback is over and that .question is in the dom, you subscribe to the click on #serials.

answered Mar 11 '14 at 16:40

KitAndKat

923
3
14
28

Shouldn't need to. `#serials` exist in the DOM on `$(document).ready(function () { ... });`. The OP is using a delegated event handler so it should be fine even after the ajax loads. – War10ck Mar 11 '14 at 16:43
So what do I need to do that is different to make that happen?<<< ignore that – tatty27 Mar 11 '14 at 16:44

onClick not working on ajax generated content

2 Answers2