javascript - Fancybox：从事件回调中访问内容

Question

我有一个带有 HTML 内容的花式框。

$( '#rename' ).fancybox(    
    {
        content: $( '#rename-container' ).html(),
        afterShow: 
            function()
            {
                // some code here 
            }
    } 
);

rename-container是一个带有内部 HTML 的 div 元素。如何在 afterShow 处理函数中使用 jQuery（或其他东西）访问内容？

例如内容包含一个输入元素，我必须设置焦点。

Answer 1

在 afterShow 中，我们可以通过调用$('.fancybox-inner')来访问。

$( '#rename' ).fancybox(    
    {
        content: $( '#rename-container' ).html(),
        afterShow: 
            function( el )
            {
                var overlay = $('.fancybox-inner');
                var newNameInput = overlay.find( 'input' );                     
                newNameInput.focus(); 
            }
    } 
);

Answer 2

#rename-container通过href在你的 html 中直接定位元素不会更容易，比如

<a id="rename" class="fancybox" href="#rename-container">open fancybox</a>

然后focus在任何元素上使用它的选择器，比如

$("#rename").fancybox({
    afterShow: function () {
        $("#myInput").focus();
    }
});

见JSFIDDLE