javascript - jquery 对话框在 Accordion MVC razor 中不起作用

Question

我正在开发 razor 项目，我需要在其中显示 jquery 模式弹出窗口。当弹出窗口不是从 Accordion 启动时，它显示得很好，但是一旦我把它放在那里，按钮就不会显示弹出窗口，而是从不同的按钮触发该功能。

我在标记中有这个:

@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>

正如我所说，当我将“打开对话框”放置在对话框 div 下方、 Accordion div 之外时，弹出窗口会正常显示，但一旦我将按钮放在那里，弹出窗口就不会出现。

预先感谢您的每一个建议

<小时/>

JS 代码更新:

<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>

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

谢谢

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 选择器将是这样的

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