диалоговое окно jquery не работает в бритве

Question

Я работаю над проектом бритвы, где мне нужно отобразить модальное всплывающее окно 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:

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

После замены кода, который у меня был, на этот код, я вижу всплывающее окно только с 1-го элемента в аккордеоне, но не с двух других. Кроме того, как только всплывающее окно появляется на экране, происходит обратная передача и событие, которое прикреплено к другой кнопке, происходит кнопка отправки. Как вы думаете, почему это?

Спасибо

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