Question

I am not sure what is wrong but every alternate time my click event does not fire. Is there a problem with fadeIn function? I tried changing .click to .live and .on and the same problem arises.

Here is my code:

$('#form').submit(function (ev) {
     ev.preventDefault();                
     $('#wrapper').html(html).scrollTop(0);              
     $('#base').fadeIn('slow', function () { 
          document.onkeydown = docOnKeydown; 
     }).click(function () {
          alert('Click Fired');
     });
     return false;
});

Answer 1

IF you wish to simply add an event handler to the object in question:

$('#base').click(function () {
   alert('Click Fired');
}).fadeIn('slow', function () { document.onkeydown = docOnKeydown; });

trigger the click event after the fadein?

$('#base').fadeIn('slow', function () {
    document.onkeydown = docOnKeydown; 
    $(this).trigger('click');
});

trigger click I(potentially while fadein)

$('#base').fadeIn('slow', function () {
    document.onkeydown = docOnKeydown; 
 }).trigger('click');

EDIT: Just and the handler when the rest is added

$(document).on('click','#base',function () {
  alert('Click Fired');
});
$('#form').submit(function (ev) {
  ev.preventDefault();
  $('#wrapper').html(html).scrollTop(0);
  $('#base').fadeIn('slow', function () {
    document.onkeydown = docOnKeydown;
  });
  return false;
});

better: for the handler if the base has a container. tag to that as more “local” than the document for performance reasons.

$('#basecontainer').on('click','#base',function () {
  alert('Click Fired');
});

EDIT BASED ON COMMENT:, “it exists already” this should also work and be simpler on the DOM:

$('#base').click(function () {
  alert('Click Fired');
});
$('#form').submit(function (ev) {
  ev.preventDefault();
  $('#wrapper').html(html).scrollTop(0);
  $('#base').fadeIn('slow', function () {
    document.onkeydown = docOnKeydown;
  });
  return false;
});