c# - JQuery UI 模态对话框触发 ASP.Net updatepanel 控件

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 UI 喜欢在 body 标签的末尾转储对话框内容，这会将其内容放在 form 标签之外。因此，如果在表单标签之外的元素上调用点击，它不会触发回发事件。

一些你可以尝试的事情:

1. 在对话框打开后检查了 dom。删除按钮是在表单标签内还是在表单标签外？如果它在外面，那是你的问题。分离然后重新附加对话框以使其位于表单标记内:

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

   $('表单').append($d);

2. 从删除事件处理程序返回 false

3. 将“$('.lauchdelete').click()”包装在 0 的 setTimeout 中:

   设置超时(函数(){ $('.lauchdelete').click(); }, 0);

4. 而不是调用 .click();直接调用 __doPostBack:

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

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

   __doPostBack(delBtnUniqueName);