如何使用弹出式花式框上的按钮附加Click事件>

Question

我无法将包含input按钮的Popup窗体附加Click 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显示你的#editSummary选择，在openPoPup()函数内作为参数传递的clone所以click事件被绑定到原来的选择器在您的文档流中，但不是在fancybox中的clone。

作为一种变通方法，您可以使用的fancybox onComplete回调（我假设你正在使用V1.3.4因为在你的代码中的API选项）到click事件绑定到元素#btnEdit内像的fancybox：

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()：

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

见JSFIDDLE