javascript - jQuery dialog box does not close - Stack Overflow

admin管理员组

文章数量:1323714

Here is my jquery for dialog

</script>
<script type="text/javascript">
    $.ajaxSetup({ cache: false });
    $(document).ready(function () {
        $(".openDialog").live("click", function (e) {
            e.preventDefault();
            $("<div></div>")
            .addClass("dialog")
            .attr("id", $(this)
                .attr("data-dialog-id"))
            .appendTo("body")
            .dialog({
                title: $(this).attr("data-dialog-title"),
                minWidth: 200,
                minHeight: 100,
                resizable: false,
                close: function () { $(this).remove() },
                modal: true
//                        buttons:{ 
//                            close:function(e){
//                               e.preventdefault();
//                               $(this).closest(".dialog").dialog("close"); 
//                            }}
            })
            .load(this.href);
        });
        $(".close").live("click", function (e) {
            e.preventDefault();                  
            $(this).closest(".dialog").dialog("close");
        });
        $(".refresh").live("click", function (e) {
            e.preventDefault();
            location.reload();
        });
    });          
</script>

and here is my delete view

@using (Html.BeginForm()) {
    <div>
    <p>Are you sure you want to delete?</p>
       @Html.HiddenFor(model=>model.UId)
   <table border=0>
    <tr>
   <td>Name:</td>
    <td>@Html.DisplayFor(model =>model.FName)
    @Html.DisplayFor(model => model.LName)</td>
    </tr>
    <tr>
    <td>PAddress:</td>
    <td>@Html.DisplayFor(model => model.PAddress)</td>                                        

    </tr>
    </table>
     <input type="submit" value="Yes"/>
    <button  class="close">No</button>


 </div>
}

the problem is when I call the close class from the button the dialog does not close.but when I remove preventDefault the dialog closed. any help please why the dialog box is not closing.

Here is my jquery for dialog

</script>
<script type="text/javascript">
    $.ajaxSetup({ cache: false });
    $(document).ready(function () {
        $(".openDialog").live("click", function (e) {
            e.preventDefault();
            $("<div></div>")
            .addClass("dialog")
            .attr("id", $(this)
                .attr("data-dialog-id"))
            .appendTo("body")
            .dialog({
                title: $(this).attr("data-dialog-title"),
                minWidth: 200,
                minHeight: 100,
                resizable: false,
                close: function () { $(this).remove() },
                modal: true
//                        buttons:{ 
//                            close:function(e){
//                               e.preventdefault();
//                               $(this).closest(".dialog").dialog("close"); 
//                            }}
            })
            .load(this.href);
        });
        $(".close").live("click", function (e) {
            e.preventDefault();                  
            $(this).closest(".dialog").dialog("close");
        });
        $(".refresh").live("click", function (e) {
            e.preventDefault();
            location.reload();
        });
    });          
</script>

and here is my delete view

@using (Html.BeginForm()) {
    <div>
    <p>Are you sure you want to delete?</p>
       @Html.HiddenFor(model=>model.UId)
   <table border=0>
    <tr>
   <td>Name:</td>
    <td>@Html.DisplayFor(model =>model.FName)
    @Html.DisplayFor(model => model.LName)</td>
    </tr>
    <tr>
    <td>PAddress:</td>
    <td>@Html.DisplayFor(model => model.PAddress)</td>                                        

    </tr>
    </table>
     <input type="submit" value="Yes"/>
    <button  class="close">No</button>


 </div>
}

the problem is when I call the close class from the button the dialog does not close.but when I remove preventDefault the dialog closed. any help please why the dialog box is not closing.

• javascript
• jquery-ui
• jquery

Share Improve this question Follow edited Jul 26, 2012 at 5:47 Musa 97.7k1717 gold badges122122 silver badges143143 bronze badges asked Jul 26, 2012 at 5:30 Sanjay MaharjanSanjay Maharjan 67188 silver badges2424 bronze badges

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 2

$(".close").live("click", function (e) { 
    e.preventDefault();                   
    $('#yourdivId').closest(".dialog").dialog("close"); 
}); 

try this...

can you please try this

$(".close").live("click", function (e) {
                e.preventDefault();                  
                $(this).closest(".dialog").dialog("close");
            });

put this code in

$(document).ready(function () {

This may work for you...

Here you need not to user preventDefault() function. preventDefault() is used to prevent unwanted default action of an event.

As an example, when you click a link, it will redirect you to another page. If you want that link to do something else, you need to prevent default and write your action.

Since this button doesn't have a default action (defined with "type" attribute), you need not to use preventDefault().

first of all you put $.ajaxSetup({ cache: false }); inside document ready function.

You can change your delete view like this.

<div>
@using (Html.BeginForm()) {
   <p>Are you sure you want to delete?</p>
       @Html.HiddenFor(model=>model.UId)
   <table border=0>
    <tr>
   <td>Name:</td>
    <td>@Html.DisplayFor(model =>model.FName)
    @Html.DisplayFor(model => model.LName)</td>
    </tr>
    <tr>
    <td>PAddress:</td>
    <td>@Html.DisplayFor(model => model.PAddress)</td>                                        

    </tr>
    </table>
     <input type="submit" value="Yes"/>
}
<button  class="close">No</button>
</div>

 $(".ui-dialog").hide();
    $(".ui-widget-overlay").hide();

本文标签： javascriptjQuery dialog box does not closeStack Overflow