javascript - 如何在弹出的 fancybox 上使用按钮附加 Click 事件>

Question

我无法将 Click 事件附加到包含 input 按钮的弹出表单。代码如下:

<a id="btnEditSummary" href=#>Edit Summary </a>
<div id="editSummary" class="hidden">
     <input type=button id="btnEdit" value="Update" />
    </div>

function openPoPup(clickHandle,contentHandle,width,height)
{
    width = typeof a !== 'undefined' ? a : 600;
    height = typeof b !== 'undefined' ? b : 300;

    $.fancybox(
        $(contentHandle).html(),
        {
            'width'             : width,
            'height'            : height,
            'minWidth'          :  width,
            'minHeight'         :  height,
            'autoScale'         : true,
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'hideOnContentClick': false,
            'onStart': function () {
                //On Start callback if needed
            }
        }
    );
}    
$("#btnEditSummary").click(function()
            {
                openPoPup('#btnEditSummary','#editSummary',300,300);

                $( "#btnEdit" ).on( "click", function() {
                    alert( $( this ).text() );
                });

            }
    $( "#btnEdit" ).on( "click", function() {
                    alert( $( this ).text() );
    });

Answer 1

您的方法的问题在于，您实际上在 fancybox 中显示 #editSummary 选择器的克隆，作为参数在openPoPup() 函数，以便将 click 事件绑定(bind)到文档流中的原始选择器，而不是绑定(bind)到克隆 在 fancybox 内。

作为解决方法，您可以使用 fancybox onComplete 回调(我假设您使用的是 v1.3.4，因为代码中的 API 选项)来绑定(bind) click事件到 fancybox 内的元素 #btnEdit ，例如:

function openPoPup(clickHandle, contentHandle, width, height) {
    width = typeof a !== 'undefined' ? a : 600;
    height = typeof b !== 'undefined' ? b : 300;

    $.fancybox($(contentHandle).html(), {
        width: width,
        height: height,
        // minWidth: width, // not valid in v1.3.x but 2.x
        // minHeight: height, // not valid in v1.3.x but 2.x
        autoScale: true,
        transitionIn: 'none',
        transitionOut: 'none',
        hideOnContentClick: false,
        onStart: function () {
            //On Start callback if needed
        },
        onComplete: function () {
            // bind click event to element inside fancybox
            $("#fancybox-content").on("click", "#btnEdit", function () {
                alert("click event bound");
            });
        }
    });
}
jQuery(document).ready(function ($) {
    $("#btnEditSummary").click(function () {
        openPoPup('#btnEditSummary', '#editSummary', 300, 300);
    });
}); // ready

注意我在其委托(delegate)形式中使用.on():

$("#fancybox-content").on("click", "#btnEdit", function (){ ... });

参见JSFIDDLE