Jquery 点击事件 - 需要两次点击才能触发

Question

这可能非常简单 - 但我很难发现发生了什么。

在 JS 小提琴上： http://jsfiddle.net/3hHAX/

有两个链接输出到“打开视频模式”。

正如链接文本所暗示的，这两个链接应该会打开一个模型弹出窗口，其中包含 youtube 视频。

这是使用来自：http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ 的漂亮照片库

由于某种原因，点击事件不会在第一次点击时触发。 但在第二个工作。

（没有包含 CSS，因此看起来不是很模态，但至少出于演示目的，您会在下面看到内容加载）。

谁能指出出了什么问题？

谢谢，

史蒂夫

Answer 1

初始化后触发点击事件，只允许初始化一次。

(function($) {    
    $(".watch-this a, .field-name-field-embed-code a").live('click',function(){
        if (!$(this).is(".pPhoto")) {
            $(this).prettyPhoto({
                social_tools: ''
            }).addClass("pPhoto").click();     
        }
        return false;    
    });
})(jQuery);

演示： http://jsfiddle.net/3hHAX/3/

编辑澄清：
这是在动态元素上初始化插件的一种非常常见的方式。如前所述，如果您的元素不是动态的，最好在 dom 就绪时进行初始化。

注意：
.live 已被贬值，您应该真正使用.on

(function($) {    
    $(document).on("click",".watch-this a, .field-name-field-embed-code a",function(){
        if (!$(this).is(".pPhoto")) {
            $(this).prettyPhoto({
                social_tools: ''
            }).addClass("pPhoto").click();     
        }
        return false;    
    });
})(jQuery);

Answer 2

谢谢各位，

这两个回答都帮助我最终解决了这个问题。

在更新的 JSFiddle 中结束解决方案：

http://jsfiddle.net/3hHAX/6/

似乎 prettyPhoto 在 click 事件上附加了它自己的内容，并且只需要应用于那些 dom 元素。

谢谢， 史蒂夫

Answer 3

• 首先，永远不要在 jquery 中使用 live 方法，除非在 dom 确实无法控制的情况下。至少你应该使用委托函数，因为实时函数会导致很多减速和很多麻烦（尽管这次没有错）
• 其次，click 事件确实会触发，如您所见 here，但由于我不知道的原因，prettyPhotos 组件第一次无法正常工作，但您可以在之前的 jsfiddle 链接中看到它 确实在您第一次点击时会发出警报，所以在我看来，这听起来像是 prettyphotos 脚本中的一个错误（Kevin B 似乎通过触发第二次点击事件巧妙地解决了这个问题。）。