WordPress 页面上 IE 和 FireFox 的 z-index 问题？

Question

加载 WordPress 页面后，我有一些 jQuery 运行。

jQuery('[class="image responsive"]').append('<div id="switch"><img src="/js/off2.png"></div>');
jQuery("#switch").css({
    'position': 'absolute',
    'left': '2%',
    'top': '40%',
    'z-index': '9'
});
jQuery('#switch img').click(function() {
    //some code that doesn't run
})

代码运行良好，点击操作在 Chrome 上触发。但是，在 IE 和 FireFox 上进行测试时，单击时没有任何反应（不过，#switch 被附加并正确设置了样式）。我已经看到 Internet Explorer 上的 z-index 错误一直追溯到 2009 年到 2014 年，但 IE 和 FireFox 的行为都没有达到我的预期。我在这里遗漏了什么吗？

Answer 1

动态创建元素时应使用 .on()。

$('body').on('click', '#switch img', function(){
  // Some code
});

Answer 2

您好，这里工作正常，请在此处检查代码。

jQuery(document).ready(function(){
  jQuery('[class="image responsive"]').append('<div id="switch"><img src="/js/off2.png"></div>');
    jQuery("#switch").css({
      'position': 'absolute',
      'left': '2%',
      'top': '40%',
      'z-index': '9'
  });
  jQuery('#switch img').click(function() {
 alert('test');
    //some code that doesn't run
  });
});

您需要添加 document.ready 即可。

WordPress 页面上 IE 和 FireFox 的 z-index 问题？

z-index issue with IE AND FireFox on WordPress page?

wordpress

firefox

jquery

internet-explorer

google-chrome