JQuery UI Модальный диалог, запускающий элемент управления ASP.Net

Question

У меня есть несколько сгенерированных на стороне сервера гиперссылок

 <a id="ctl00_ContentPlaceHolder1_APMySlides_unlinkImage_2428_1" title="Click Here to remove this image from this application." class="APMySlides_unlinkImage" href="#"></a>
 <a id="ctl00_ContentPlaceHolder1_APMySlides_unlinkImage_2428_2" title="Click Here to remove this image from this application." class="APMySlides_unlinkImage" href="#"></a>
 <a id="ctl00_ContentPlaceHolder1_APMySlides_unlinkImage_2428_3" title="Click Here to remove this image from this application." class="APMySlides_unlinkImage" href="#"></a>
 <a id="ctl00_ContentPlaceHolder1_APMySlides_unlinkImage_2424_3" title="Click Here to remove this image from this application." class="APMySlides_unlinkImage" href="#"></a>

Раздел для запуска обновления

 <asp:HiddenField ID="delhiddenfield" runat="server" />
 <asp:Button ID="lauchdelete" runat="server" Text="" OnClick="removeLink" CssClass="lauchdelete" style="display:none;" />
 <div id="deleteconfirm" title="Are you sure?" style="display:none;">Are you sure you want to remove this image from this application?</div>

Небольшой кусочек JQuery, который вызывает другую функцию при нажатии любой из них

 var del = '<%=delhiddenfield.ClientID %>';
 $(function(){
     $('.APMySlides_unlinkImage').click(function (event) { triggerdel(event); });
 });
 function triggerdel(event) {
        var caller = event.target || event.srcElement;
        // get the id vals
        var idsplit = caller.id.split("_");
        if (idsplit.length > 2) {
            $('#' + del).val(idsplit[idsplit.length - 2] + "_" + idsplit[idsplit.length - 1]);
            $("#deleteconfirm").dialog({
                resizable: false,
                height: 140,
                modal: true,
                buttons: {
                    "Delete": function () {
                        // this section is supposed to trigger the update
                        $('.lauchdelete').click();
                        $('#' + del).val('');
                    },
                    Cancel: function () {
                        $(this).dialog("close");
                    }
                }
            });
        }
    }

Если я помещаю OnClientClick = "alert ('woo lauchdelete clicked')" в кнопку launchdelete, она срабатывает, но мой код не вызывает.Однако, если я уберу модальное диалоговое окно, например, так:

    function triggerdel(event) {
        var caller = event.target || event.srcElement;
        // get the id vals
        var idsplit = caller.id.split("_");
        if (idsplit.length > 2) {
            $('#' + del).val(idsplit[idsplit.length - 2] + "_" + idsplit[idsplit.length - 1]);
            $('.lauchdelete').click();
            $('#' + del).val('');
        }
    }

Код работает правильно и запускает код.Единственное отличие, которое я вижу, это диалоговое управление, но почему?Есть ли способ заставить элемент управления сработать так, как ожидается, с нажатой кнопкой удаления модального диалогового окна?

Answer 1

Вы должны убедиться, что кнопка удаления находится внутри тега формы после открытия диалогового окна. Пользовательский интерфейс jQuery любит выгружать содержимое диалога в конце тега body, в результате чего его содержимое выходит за пределы тега формы. В результате, если щелчок вызывается для элемента вне тега формы, это не вызовет событие обратной передачи.

некоторые вещи, которые вы можете попробовать:

1. осмотрел дом после открытия диалога. Кнопка удаления находится внутри или вне тега формы? если это снаружи, то это ваша проблема. отсоедините, а затем снова прикрепите диалоговое окно к тегу формы:

   var $ d = $ ('# deleteconfirm'). Detach ();

   $ ( 'форма') добавление ($ г);.

2. вернуть false из обработчика событий удаления

3. обернуть "$ ('. Lauchdelete'). Click ()" в setTimeout 0:

   SetTimeout (функция () { $ ( 'Lauchdelete') нажмите (). }, 0);

4. вместо вызова .click (); Вызовите __doPostBack напрямую:

   var $ deleteButton = $ ('. LaunchDelete');

   var delBtnUniqueName = $ deleteButton.attr ('name');

   __ doPostBack (delBtnUniqueName);

Answer 2

Вы можете получить помощь от здесь после использования appendto

Пример кода

$("#deleteconfirm").parent().appendTo($("form:first")); 

Answer 3

Все выглядит хорошо. Можете ли вы утешить объект, чтобы узнать, находит ли он его при нажатии кнопки?

buttons: {
    "Delete": function () {
        // What's the output here?
        console.log($('.lauchdelete'));
    }
}