创建时间和。选择元素

Question

我正在使用 this method 为嵌入的 YouTube/Vimeo 视频创建自定义缩略图。

很简单 - 图像作为占位符，单击时替换为嵌入。

我的内容是通过 JSON $.getJSON 生成的，点击绑定似乎没有捕捉到。如果我在页面加载后通过控制台并运行我的绑定函数，它工作正常。所以我认为我的问题是时间 - 我认为点击绑定是运行ning 在内容生成之前。

我试过 $( document ).ready() 并且我试过使用回调（如下所示）

    function binding()
    {
    $('.portfolioVideoPlaceholder').click(function(){
                                var video = '<iframe src="'+ $(this).attr('data-video') +'"></iframe>';
                                $(this).replaceWith(video);
                                }
                        );      
    }
    function fillSection(callback)
    {

        $.getJSON('js/Mammola-portfilio-list.json', function (data){.......}
    callback(); 
    }

    fillSection(binding);

我的 HTML 占位符如下所示： <img class="portfolioVideoPlaceholder" src="images/thumb-gpwit.png" data-video="//www.youtube.com/embed/WiOZdLFrbDE">

如有任何帮助，我们将不胜感激。

Answer 1

您是否在 getJSON 的响应函数中调用绑定？如果没有，你应该。

或者，切换到使用 "on"。

http://api.jquery.com/on/

$('body').on('.portfolioVideoPlaceholder', 'click', function(){} );

您可以在文档加载时调用它，如果它注意到一个新元素，它会将那个函数绑定到它，而不必再次调用它。

Answer 2

在 DOM 就绪时注册一个 委托事件处理程序 比在项目添加到时尝试重新连接基于元素的处理程序更容易DOM。处理程序应该附加到最近的动态元素的不变祖先。 document 是您的默认值，如果没有其他 closer/convenient。

例如使用：

$(document).on('click', '.portfolioVideoPlaceholder', function(){} );

或者最好是

$('#someAncestor').on('click', '.portfolioVideoPlaceholder', function(){} );

这通过侦听事件将 DOM 冒泡到连接的元素，然后它应用 jQuery 选择器（针对元素仅在气泡链中），然后它会为导致事件的任何匹配元素调用函数。这是非常有效的，意味着匹配元素只需要在事件时存在，而不是在事件注册时存在。

注意：如果要对根元素使用委托事件，请不要使用 body。而是使用 document 作为默认值。似乎没有多少人知道这一点，但是如果您的页面样式导致计算出的主体高度为 0，例如多亏了绝对元素，鼠标事件不会冒泡到 body。然而，它们总是会冒泡到 document。另外 $(document) 比 $('body') 解析起来更快（注意你的细微差别）。

创建时间和。选择元素

Timing of creating vs. selecting elements

jquery

jquery-selectors