Question

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

我在一个页面上有8个动态生成的YouTube缩略图块和一个播放器div。当我点击其中一个缩略图时，我希望关联的视频可以在播放器div中播放。以下代码适用于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
引用似乎有所作为（完全不可能，这对我尖叫：“你在找错了地方！”）

要检查的事项：

退一步看看周围的代码
确保没有可能解除您的事件绑定的代码。如果有，请在其周围设置一些debugger s / breakpoints / console.log
在事件功能

debugger

console.log

确保您的文件未被缓存。如果您的JavaScript在外部文件中，我要做的另一件事就是直接导航到该文件并在那里进行缓存刷新。
确保您正在查看网站的正确版本（例如，不编辑本地版本，然后查看外部版本）
回顾所有关于您认为发生的事情的假设

我99％确定问题与您发布的代码无关。我认为你所得到的是那些错误之一，当它最终起作用时，你将永远在你的脸上，在晚上失眠。我们都这样做了！

Answer 2

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

Answer 3

尝试使用Youtube API非常容易包含一个视频，因此可以避免错误。

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

中找到

JQuery .click（）适用于Firefox但不适用于Chrome或IE

3 个答案: