简单的jQuery模式弹出窗口未显示在gridview按钮上

Question

我已经将bPopup用作jquery plugin.link是： http ://www.jqueryscript.net/lightbox/Lightweight-jQuery-Modal-Popup-Plugin-bPopup.html

这是带有按钮字段的gridview。

              <asp:GridView ID="gvwData" runat="server" 
                   AllowPaging="True" AutoGenerateColumns="False" >                                                                                                                                                                                                                                                                      
                    <Columns>
                        <asp:TemplateField HeaderText="preview">
                        <ItemTemplate>                              
                          **<asp:Button id="mybutton" runat="server" Text="click"/>**
                        </ItemTemplate>

                        </asp:TemplateField>

                    </Columns>
                    <AlternatingRowStyle Width="220px" />
                </asp:GridView>

这是JavaScript函数：

 <script type="text/javascript">

      $(document).on("click", "[id*=mybutton]", function(e) {

        e.preventDefault();     

          **$('#elementtopopup').bPopup();**

 });  (jQuery);


</script>

$（'＃elementtopopup'）。bPopup（）未显示。 以下是我遇到的错误的屏幕截图。

控制台错误的屏幕截图

Answer 1

将插件添加到页面底部

<script src="jquery.bpopup-0.8.0.min.js"></script>//change it to the path of the js file

Answer 2

我认为您的选择器对于该按钮是错误的，应该是：

$(document).on("click", "[id$='mybutton']", function(e) {
    // code
});

Web表单在ID后面加上您指定的ID，而不是在选择器要查找的ID前面加上前缀。