触发 ASP.Net 更新面板控件的 JQuery UI 模态对话框

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 标记之外。因此，如果在表单标记之外的元素上调用 click，则不会触发回发事件。

你可以尝试一些事情：

1. 在打开对话框后检查 dom。删除按钮是在表单标签内还是在表单标签外？如果它在外面那是你的问题。分离然后将对话框重新附加到表单标签内：

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

   $('form').append($d);

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

3. 将 "$('.lauchdelete').click()" 包装在 0 的 setTimeout 中：

   setTimeout(函数(){ $('.lauchdelete').click(); }, 0);

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

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

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

   __doPostBack(delBtnUniqueName);

Answer 2

使用 appendto 后，您可以从 here 获得帮助

示例代码

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

Answer 3

一切看起来都不错。当您按下按钮时，您能否安慰对象以查看它是否找到了它？

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