Question

我无法使用包含input按钮的弹出窗体附加Click事件。代码如下：

<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中显示clone 选择器的#editSummary，在openPoPup()函数中作为参数传递， click事件绑定到文档流中的原始选择器，但不绑定到fancybox中的clone。

作为一种解决方法，您可以使用fancybox onComplete回调（我假设您使用的是v1.3.4，因为代码中的API选项）将click事件绑定到元素{{ 1}}在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：

.on()

参见 JSFIDDLE

如何使用弹出框fancybox上的按钮附加Click事件＆gt;

1 个答案: