在jquery生成的元素上绑定事件

Question

我的代码是这样的：

$('.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);
});

第一个功能很好用，但第二个功能不起作用。 我意识到，如果我将第二个功能复制/粘贴到控制台中的第一个功能之后 ，它也可以工作。

我尝试了一些解决方案（回调/ setTimeout / jquery延迟/jquery.when方法...），我没有尝试promise，但我认为我不必这样做。 也许我写的这些解决方案不够好。

我最终尝试将事件（单击）直接放在.before() ，这将创建我的新元素，如下所示：

$('.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;
});

但这也不起作用。

谢谢您的帮助。

编辑：

我终于为我的第二次点击事件找到了一种解决方案（这不是最好的解决方案，但是我可以用）：

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);

谢谢。

Answer 1

您需要使用委托绑定，因为尝试绑定之前该元素不存在：

$('#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);
}); 

请注意， #parent-element-of-closegoogle必须是进行绑定时已经存在的元素-如果您没有其他要绑定的元素，则可以是$(document)