jQuery UI 对话框没有正确响应删除单击

Question

我是 jQuery 的新手，并尝试按照这篇文章在 Gridview 项目上实现 jQuery UI 对话框： http://www.codeproject.com/Articles/238122/Delete-Functionality-in-GridView-with-Confirmation

我已经使用 Chrome 开发工具逐步完成了这段代码，并且对话框正确显示，但是当我单击删除按钮时，关联的匿名函数 __doPostBack(uniqueID 似乎没有触发。可以设置一个 JS 断点来捕获一个单击客户端上的“删除”按钮？对于服务器端代码，我在 Visual Studio 中有一个断点，通常会输入回发但它从未命中。

这里是我的 ASP.Net Gridview 的相关栏目：

<asp:TemplateField HeaderText="Deleting..">
        <ItemTemplate>
        <!--To fire the OnRowDeleting event.-->
        <asp:LinkButton ID="lbDelete" runat="server" CommandName="Delete" 
            OnClientClick="return deleteItem(this);"
            ControlStyle-CssClass="buttonInRow"  
            Text="Delete">
        </asp:LinkButton>
        </ItemTemplate>
    </asp:TemplateField>

这是它的渲染方式：

<td>
        <!--To fire the OnRowDeleting event.-->
        <a onclick="return deleteItem(this);" id="ctl00_MainContentPlaceHolder_GridView1_ctl02_lbDelete" class="buttonInRow" href="javascript:__doPostBack('ctl00$MainContentPlaceHolder$GridView1$ctl02$lbDelete','')">Delete</a>
        </td>

以下脚本没有错误：

$(function() {
    InitializeDeleteConfirmation();
});

function InitializeDeleteConfirmation() {
$('#deleteConfirmationDialog').dialog({
    autoOpen: false,
    resizable: false,
    height: 140,
    modal: true,
    buttons: {
        "Delete": function() {
            $(this).dialog("close");
        },
        Cancel: function() {
            $(this).dialog("close");
        }
    }
});
}
function deleteItem(element) {
var uniqueID = element.id;
var row = element.parentNode.parentNode;
// Cells[n]: n referring to the cell number displayed on GridView; n starting from 0...
var PositionTitle = row.cells[0].innerText;
    var dialogTitle = 'Permanently Delete Item: ' + PositionTitle + '?';

    $("#deleteConfirmationDialog").html('<p><span class="ui-icon " + "ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>" + "Please click delete to confirm deletion.</p>');

    $("#deleteConfirmationDialog").dialog({
        title: dialogTitle,
        buttons: {
        "Delete": function () { __doPostBack(uniqueID, ''); 
                  $(this).dialog("close"); },
        "Cancel": function () { $(this).dialog("close"); }
        }
     });

    $('#deleteConfirmationDialog').dialog('open');  
    return false;

}

这里的想法是上面的 deleteItem 脚本总是返回 false 因为（表面上）它在关闭对话框之前处理回发（即与呈现的 HTML 上的代码相同）上面的sn-p）。这个 __doPostBack 函数会不会在我身上失败并且不会中断调试器？

Answer 1

我找到了解决这个问题的方法。我将尝试解释以帮助其他人。这里的原则是 jQuery 对话框将直接从 Javascript 执行 __doPostBack 函数。问题的关键在上面渲染的 sn-p 中也贴在这里：

<a onclick="return deleteItem(this);" id="ctl00_MainContentPlaceHolder_GridView1_ctl02_lbDelete" class="buttonInRow"    href="javascript:__doPostBack('ctl00$MainContentPlaceHolder$GridView1$ctl02$lbDelete','')">Delete</a>

注意 ID 和 doPostBack 的第一个参数之间的值差异：

id="ctl00_MainContentPlaceHolder_GridView1_ctl02_lbDelete"

对

  ('ctl00$MainContentPlaceHolder$GridView1$ctl02$lbDelete'

所以，我更改了我的脚本以从“uniqueID”创建一个“postbackID”，如下所示：

function deleteItem(element) {
var uniqueID = element.id;
var postbackID = uniqueID.split("_").join("$");
var row = element.parentNode.parentNode;
var PositionTitle = row.cells[0].innerText; 
    var dialogTitle = 'Permanently Delete Item: ' + PositionTitle + '?';
    $("#deleteConfirmationDialog").html('<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>" + "Please click delete to confirm deletion.</p>');
    $("#deleteConfirmationDialog").dialog({
        title: dialogTitle,
        buttons: {
        "Delete": function() {
            __doPostBack(postbackID, ''); 
            $(this).dialog("close"); },
        "Cancel": function () { $(this).dialog("close"); }
    }
});
$('#deleteConfirmationDialog').dialog('open');
return false;

}

可能有更优雅的方法可以做到这一点，但我很高兴能够成功实现 junnark 的关于 CodeProject 的伟大论文中承诺的结果强>。例如，他检索 this.name 并将其用于直接调用 __doPostBack。我尝试将 name 属性添加到我的 asp:LinkBut​​ton 但它仅使用“短名称”而不是完整的命名容器名称呈现。在他的文章中，他使用的是 ImageButton 而我使用的是 LinkBut​​ton 控件，因此这可能是这种差异的根源。

Answer 2

您的代码非常混乱且难以理解。对于 .NET 呈现的控件，我总是建议查看 ends with selector。

然后您的代码简化为：

$('[id$="lbDelete"]').on('click', function(e) {
  // Your link element available as a jQuery object
  var $el = $(this);

  // Prevent the link from firing before anything else can happen
  e.preventDefault();

  // Now you can manipulate the DOM using your link as a reference point
  // eg. $el.parent()...
});

你也可以在这个函数中放置一个断点来逐行调试。