Bind an event on a jquery generated element

Question

My code is like this:

$('.flag-icon-dz').click(function() {
  var lang = 'Arab';
  var $frame = $('.goog-te-menu-frame:first');
  if (!$frame.size()) {
    console.log("Error: Could not find Google translate frame.");
    return false;
  }
  $frame.contents().find('.goog-te-menu2-item span.text:contains(' + lang + ')').get(0).click();
  $("li.ql-item.linkid188546").after("<li class='ql-item linkid18854777 closegoogle'><a href='#' class='btn-primary' target='_self'><i class='icon closegoogle ls-lang-frr' aria-hidden='true'></i></a></li>").fadeIn(500);
  $('li.ql-item.linkid188546').fadeOut(500);
  return false;
});

$('.closegoogle').click(function() {
  $('.skiptranslate').contents().find('.goog-close-link > img').click();
  $('li.ql-item.linkid18854777').fadeOut('fast').remove();
  $('li.ql-item.linkid188546').fadeIn(500);
});

The first function works great, but the second doesn't. I realize that if I copy/paste the second function in the console after the first one, it works too.

I tried a few solutions (callback / setTimeout / jquery deferred / jquery .when method...) I didn't try promise but I don't think I have to in my context. Maybe I didn't write these solutions good enough.

I finally try to put my event (click) directly the .before() which create my new element like this :

$('.flag-icon-dz').click(function() {
  var lang = 'Arab';
  var $frame = $('.goog-te-menu-frame:first');
  if (!$frame.size()) {
    console.log("Error: Could not find Google translate frame.");
    return false;
  }
  $frame.contents().find('.goog-te-menu2-item span.text:contains(' + lang + ')').get(0).click();
  $("li.ql-item.linkid188546").after("<li class='ql-item linkid18854777 closegoogle'><a href='#' class='btn-primary' target='_self'><i class='icon closegoogle ls-lang-frr' aria-hidden='true'></i></a></li>").fadeIn(500).click(function() {
    $('.skiptranslate').contents().find('.goog-close-link > img').click();
    $('li.ql-item.linkid18854777').fadeOut('fast').remove();
    $('li.ql-item.linkid188546').fadeIn(500);
  });
  $('li.ql-item.linkid188546').fadeOut(500);
  return false;
});

But it doesn't work either.

Thanks for the help.

EDIT :

I finally found a kind of solution for my second click event (which isn't the best solution but i works) :

window.setInterval(function(){$('.closegoogle').on("click",function(){
$('.skiptranslate').contents().find('.goog-close-link > img').click();
  $('li.ql-item.linkid18854777').fadeOut('fast').remove();
  $('li.ql-item.linkid188546').fadeIn(500);
}); }, 1000);

Thanks.

Answer 1

You need to use a delegated bind as the element does not exist before you try your binding:

$('#parent-element-of-closegoogle').on('click', '.closegoogle', function() {
  $('.skiptranslate').contents().find('.goog-close-link > img').click();
  $('li.ql-item.linkid18854777').fadeOut('fast').remove();
  $('li.ql-item.linkid188546').fadeIn(500);
}); 

Please note that the #parent-element-of-closegoogle needs to be an element that already exists when you do the binding - this can be $(document) if you hjave no other element to bind to