第二次单击jQuery对话框时不会打开

jQuery dialog is not opening on second click

本文关键字：单击 jQuery 对话框 第二次      更新时间：2023-09-26

我给出的代码是，在关闭一次后，gridview1中的链接不起作用

<script type="text/javascript">
    var dialogOptions = {
        autoOpen: false,
        appendTo: "#dialogContainer",
        modal: true,
        height: "auto",
        width: "auto",
        title: "Dialog Title",
        closeOnEscape: true,
        show: { effect: "fold", duration: 4000 },
        buttons: {
            Cancel: function () {
                $(this).remove();
            }
        }
    };
    $(".ui-widget-overlay").live("click", function () {
        $("div:ui-dialog:visible").dialog("close");
    });
    $( function() {
        $(".dialog-marker").on("click", function () {
            var d = $(this).next("div").first().dialog(dialogOptions);
            d.dialog("open");
            return false;
        });
    });
</script>

我的aspx页面代码是

<body>
    <form id="form1" runat="server">
  <div style="width: 400px;">
    <asp:GridView ID="GridView1" OnRowDataBound="GridView1_RowDataBound" runat="server" AutoGenerateColumns="False"
      DataKeyNames="BusNo"
      DataSourceID="SqlDataSource1">
      <Columns>
        <asp:BoundField DataField="RouteName" HeaderText="RouteName" SortExpression="RouteName" />
        <asp:TemplateField HeaderText="Info">
          <ItemTemplate>
            <div id="divButton" runat="server" class="btn_styling dialog-marker" title="This could also have been a <button> element or maybe an <img> element...anything really">X</div>
            <div id="popup" style="display: none;">
              <asp:GridView ID="GridView2" runat="server"
                AutoGenerateColumns="False"
                DataSourceID="SqlDataSource2">
                <Columns>
                  <asp:BoundField DataField="StopName" HeaderText="StopName" SortExpression="StopName" />
                </Columns>
              </asp:GridView>
              <asp:SqlDataSource ID="SqlDataSource2" runat="server" 
                ConnectionString="<%$ ConnectionStrings:constr %>"
                SelectCommand="SELECT StopName from BusStops WHERE (BusNo = @BusNo)">
                <SelectParameters>
                  <asp:Parameter Name="BusNo" />
                </SelectParameters>
              </asp:SqlDataSource>
            </div>
          </ItemTemplate>
        </asp:TemplateField>
      </Columns>
      <RowStyle BorderColor="Blue" BorderStyle="Solid" BorderWidth="1px" />
    </asp:GridView>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
      ConnectionString="<%$ ConnectionStrings:constr %>"
      SelectCommand="SELECT BusNo,RouteName from BusRoutes">
    </asp:SqlDataSource>
  </div>
  <div id="dialogContainer">
  </div>
</form>
</body>
and code behind code is  
 public void GridView1_RowDataBound(object sender, System.Web.UI.WebControls.GridViewRowEventArgs e)
    {
    if (e.Row.RowType == DataControlRowType.DataRow) {
        GridView gv2 = (GridView)e.Row.FindControl("GridView2");
        SqlDataSource sds = (SqlDataSource)e.Row.FindControl("SqlDataSource2");
        sds.SelectParameters["BusNo"].DefaultValue = GridView1.DataKeys[e.Row.RowIndex].Value.ToString();
        gv2.DataBind();
    }
  }

试试这个可能会奏效，

$(document).off("click", ".dialog-marker").on("click", ".dialog-marker", function () {
    var d = $(this).next("div").first().dialog(dialogOptions);
    d.dialog("open");
    return false;
});

.of（）方法删除附加了.on（）的事件处理程序。有关详细信息，请参阅该页上对委派和直接绑定事件的讨论。调用不带参数的.off（）将删除附加到元素的所有处理程序。通过提供事件名称、名称空间、选择器或处理程序函数名称的组合，可以删除元素上的特定事件处理程序当给定多个筛选参数时，提供的所有参数必须匹配才能删除事件处理程序

你可以参考http://api.jquery.com/off/

请在document.ready中添加$(".ui-widget-overlay").live("click", function () {。一些类似的东西

 $(document).ready(function(){
       $(".ui-widget-overlay").live("click", function () {
          $("div:ui-dialog:visible").dialog("close");
       });
       $(".dialog-marker").on("click", function () {
           var d = $(this).next("div").first().dialog(dialogOptions);
           d.dialog("open");
          return false;
        });
    });

或者只是

执行这样的函数，并在onClick事件上添加一个函数调用

function showDialogBox(){
     var d = $(this).next("div").first().dialog(dialogOptions);
        d.dialog("open");
        return false;
}

function closeDialogBox(){
    $(".ui-widget-overlay").live("click", function () {
        $("div:ui-dialog:visible").dialog("close");
    });
}
相关文章：