WordPress 页面上的 IE 和 FireFox 的 z-index 问题？ [关闭]答案

【问题标题】：z-index issue with IE AND FireFox on WordPress page? [closed]WordPress 页面上的 IE 和 FireFox 的 z-index 问题？ [关闭]
【发布时间】：2015-05-11 20:43:23
【问题描述】：

我在 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 的行为都没有达到我的预期。我在这里遗漏了什么吗？

【问题讨论】：

您是否尝试使用检查器查看是否是导致问题的实际 z-index？
我没有，但我似乎找不到代码的任何其他潜在问题。欢迎提出建议，因为我似乎无法找出可能导致此问题的原因。

标签： jquery wordpress google-chrome internet-explorer firefox

【解决方案1】：

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

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

【讨论】：

应该加了，我已经试过了。
那么问题可能出在其他地方。至少我可以在图像点击时正确触发点击事件。 jsfiddle.net/nadsojob

【解决方案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 并且它的工作。

【讨论】：