JQuery .click() 适用于 Firefox 但不适用于 chrome 或 IE答案

【问题标题】：JQuery .click() works in Firefox but not chrome or IEJQuery .click() 适用于 Firefox 但不适用于 chrome 或 IE
【发布时间】：2013-05-03 09:31:54
【问题描述】：

编辑：为了清楚起见，我有问题的不是 jsfiddle。这在所有浏览器中对我来说都很好，这是我网站上的实际实现，它使用下面的确切代码。

我在一个页面上有一个由 8 个动态生成的 YouTube 缩略图和一个播放器 div 组成的块。当我单击其中一个缩略图时，我希望关联的视频在播放器 div 中进行 ajaxly 播放。以下代码适用于 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 上又打破了它。

【问题讨论】：

你的控制台有错误吗？
等等，有什么问题？那个 JSFiddle 不应该在 Chrome 中工作吗？它对我有用...
不，任何浏览器都没有控制台错误。
你的浏览器可能有问题，也许你禁用了 js，因为代码在任何地方都可以工作。
你最好给我们你的完整代码

标签： jquery ajax internet-explorer google-chrome click

【解决方案1】：

尝试使用 Youtube API 很容易包含一个视频，从而避免错误。

一个简单的例子可以在https://developers.google.com/youtube/iframe_api_reference#Getting_Started找到

【讨论】：

【解决方案2】：

代码看起来不错
控制台没有错误提示
在 JSFiddle 中工作
引用似乎有所作为（完全不可能，这对我来说是尖叫：“你找错地方了！”）

检查事项：

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

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

【讨论】：

【解决方案3】：

它在 FF、Chrome 和 IE 中对我有用。单引号或双引号不应该有任何区别。你认为它确实让我认为你没有正确测试的事实。确保清除每个浏览器中的缓存。或者至少在确定它是否正常工作之前点击刷新几次。

【讨论】：

我清空了缓存，刷新了几次，还是不行。再次，对不起，如果我的问题不清楚。不是 jsfiddle 不起作用，而是我网站上的实际实现。
如果您发布的代码没有重现问题，您怎么能期望得到有效的解决方案。您需要让人们访问该页面，或者找到一种方法来复制它。可能有多种原因导致它无法正常工作。
我冒昧地猜测您遇到了某种竞争条件，这可以解释为什么它有时有效而其他情况无效。作为快速修复，您可以尝试将 '$(document).ready(' 更改为 '$(window).load('。这可能会解决问题。
成功了，@Ringo。谢谢你。你说作为“快速修复”，我有什么理由不想这样吗？
如果它现在对你有用就可以了。一般来说，如果您的页面上有很多内容，则可能很难将您的代码与您的行为关联到不同的事件来保持井井有条。我认为您至少应该尝试弄清楚为什么它必须等到 window.load()。可能是在您应用该行为之后才检索到 youtube 数据。或者有时它会在之前，有时之后被检索到。如果是这种情况，您可以将 $(document).ready() 与 $.on('click') 一起使用，而不是 .click()。嘿，请随时将我的答案标记为正确，是的！ ;-)