Question

我提供的代码在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();
    }
  }

Answer 1

尝试这可行，

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

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

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

Answer 2

请在$(".ui-widget-overlay").live("click", function () {内添加document.ready。像这样的事情

 $(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");
    });
}

第二次单击时，jQuery对话框未打开

2 个答案: