JQuery .click() 在 Firefox 中有效，但在 chrome 或 IE 中无效

Question

编辑:澄清一下，我遇到的问题不是 jsfiddle。这在所有浏览器中都适合我，这是我网站上的实际实现，它使用下面的确切代码。

我在一个页面上有一个由 8 个动态生成的 YouTube 缩略图组成的 block ，以及一个播放器 div。当我单击其中一个缩略图时，我希望关联的视频在播放器 div 中以 ajax 方式播放。以下代码适用于 FF，但不适用于 IE 或 Chrome。

$(document).ready(function(){


    $('.vidlink').click(function (event) {
            event.preventDefault();
            var addressValue = $(this).attr("href");
            alert(addressValue);

            iFrame = "<iframe width=\"560\" height=\"315\" src=\"http://www.youtube.com/embed/"+addressValue+"\" frameborder=\"0\" allowfullscreen></iframe>";


            newDiv = "<div id=\"vidPlayer\">" + iFrame + "</div>";


            $('#vidPlayer').replaceWith(newDiv);

        });

}); 

This is pretty much what I'm trying to do (JSFiddle).

它在 FF 中也不起作用，直到我将 $('.vidlink') 周围的双引号更改为单引号。我用 $(this).attr("href") 尝试过，但这在 FF 上再次破坏了它。

Answer 1

• 代码看起来不错
• 控制台没有输出任何错误
• 在 JSFiddle 中工作
• 引号似乎会产生影响(完全不可能，这让我尖叫:“你找错地方了!”)

要检查的事项:

• 退一步看看周围的代码可能会有所帮助
• 确保没有任何代码可能会解除您的事件的绑定(bind)。如果有，请在其周围设置一些debuggers/breakpoints/console.logs
• 在事件函数中设置一些debuggers/breakpoints/console.log
• 确保您的文件没有被缓存。如果您的 JavaScript 位于外部文件中，我要做的另一件事是直接导航到该文件并在那里进行缓存刷新。
• 确保您查看的是网站的正确版本(例如，不编辑本地版本，而是查看外部版本)
• 回顾您对正在发生的事情的所有假设

我 99% 确定问题不在于您发布的代码。我认为你所犯的错误就是这些之一，当它最终起作用时，你将永远捂着脸，晚上失眠。我们都做到了!