编辑：

Question

我正在研究razor项目，我需要显示jquery模式弹出窗口。弹出窗口没有从手风琴开始显示，但是一旦我把它放在那里，按钮不显示弹出窗口，而是从不同的按钮触发功能。

我在标记中有这个：

@using (Html.BeginForm("ASPXView", "Report", FormMethod.Post)) {
    @Html.ValidationSummary(true, 
         "Password change was unsuccessful. Please correct the errors and try again.")
    <div>
        @Html.Hidden("Id", Model.Report.Id)
        <div id="accordion">

            @foreach (var item in Model.Parameters)
            {
                <h3><a href="#">@Html.LabelFor(m => item.Name, item.Prompt)</a></h3>
                <div>
                    <div class="editor-label">
                        Search @*Html.TextBox("Search")*@ 
                        <input id="@("Search" + item.Name)" type="text" name="q" data-autocomplete="@Url.Action("QuickSearch/" + item.Name, "Report")" />
                    </div>

                    <div class="editor-field">
                        <select multiple id="@("Select" +item.Name)" name="@("Select" +item.Name)"></select>                           
                    </div>

                    <div class="removed">                     
                     <button id="opener">Open Dialog</button>               
                    </div>              
                </div>
            }         
        </div>
        <p style="text-align: right">
            <input type="submit" value="Submit" />
        </p>
    </div>
}
<div id="dialog" title="Basic dialog">
    <p>Test Content.</p>
</div>

JS代码：

<script type="text/javascript">
    var openDialog = function () {

        $('#dialog').dialog('option', 'buttons', {
            "Cancel": function () {
                $('#dialog').dialog('close');
            }
        });


        $('#dialog').dialog('open');

    };
    $(function () {
        $("#dialog").dialog({
            autoOpen: false,
            show: "blind",
            hide: "explode"
        });
        $('#opener').click(openDialog);
    })

</script>

正如我所说，当我将Open Dialog置于对话框div之下时，在手风琴div之外，弹出窗口正常，但是一旦我按下按钮，弹出窗口就不会出现。

提前感谢您的每一条建议

JS CODE UPDATE：

<script type="text/javascript">
    $(function () {
        $('#opener').click(function () {
            $("#dialog").dialog('destroy');
            $("#dialog").attr("title", "Your Title Heren");
            $("#dialog").dialog({
                height: 620,
                width: 700,
                modal: true
            });
        });

    })
</script>

在替换了我使用此代码的代码后，我只能从手风琴中的第一项看到弹出窗口，而不是从其他两个看到弹出窗口。此外，一旦弹出窗口出现在屏幕上，就会发生回发，并且附加到另一个按钮的事件会发生提交按钮。你为什么这么认为？

由于

Answer 1

可能你应该有你的jQuery这样

$('button[id^=opener]').click(function (){
 $("#dialog").dialog('destroy');
    $("#dialog").attr("title", "Your Title Heren");
    $("#dialog").dialog({
        height: 620,
        width: 700,
        modal: true
    });
});

编辑：

标记应该像这样

@int i = 0;
 @foreach (var item in Model.Parameters)
        {
          // your rest of the Code
                <div class="removed">                     
                 <button id="opener"+i>Open Dialog</button>               
                </div>              
            </div>
i++;
        }

jQuery Selector将会像这样

$('button[id^=opener]').click(function (){
// Rest Continues

手风琴mvc razor中的jquery对话框不起作用

1 个答案:

编辑：