Question

我有许多服务器端生成的HyperLinks

 <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，则不会触发回发事件。

你可以尝试的一些事情：

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

var $ d = $（'＃deleteconfirm'）。detach（）;

$（ '形式'）附加（$ d）;
从删除事件处理程序返回false
包装“$（'。lauchdelete'）。点击（）”在setTimeout为0：

的setTimeout（函数（）{ $（ 'lauchdelete'）点击（）。 }，0）;
而不是调用.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'));
    }
}

JQuery UI模式对话框触发ASP.Net updatepanel控件

3 个答案: