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

我是jQuery的新手，尝试通过本文在Gridview项上实现jQuery UI对话框：

我已经使用Chrome开发工具浏览了这段代码，对话框正确显示，但当我单击Delete按钮时，关联的匿名函数\uuu doPostBack（uniqueID）似乎不会启动。是否可以设置JS断点来捕获“Delete”的单击客户端上的按钮？对于服务器端代码，我在VisualStudio中有一个断点，通常会在此处输入回发，但从未命中

以下是我的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>

我在以下脚本中没有发现错误：

$(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;

$（函数（）{
初始化删除确认（）；
});
函数InitializeDeleteConfirmation（）{
$（“#删除确认对话框”）。对话框({
自动打开：错误，
可调整大小：false，
身高：140，
莫代尔：是的，
按钮：{
“删除”：函数（）{
$（此）.dialog（“关闭”）；
},
取消：函数（）{
$（此）.dialog（“关闭”）；
}
}
});
}
函数删除项（元素）{
var uniqueID=element.id；
var row=element.parentNode.parentNode；
//单元格[n]：n表示GridView上显示的单元格编号；n从0开始。。。
var PositionTitle=行。单元格[0]。innerText；
var dialogTitle='永久删除项：'+PositionTitle+'？'；
$（“#删除确认对话框”）.html（“”+“请单击删除以确认删除。
”）；
$（“#删除确认对话框”）。对话框({
标题：dialogTitle，
按钮：{
“Delete”：函数（）{uuudopostback（uniqueID，”）；
$（this.dialog（“close”）；}，
“取消”：函数（）{$（this）.dialog（“close”）；}
}
});
$（“#删除确认对话框”）.dialog（'open'）；
返回false；

}

---

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

您的代码非常混乱，很难理解。对于.NET呈现的控件，我始终建议查看

然后，您的代码简化为：

$('[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()...
});

---

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

我找到了这个问题的解决方案。我将尝试解释，以便将来帮助其他人。这里的原则是jQuery对话框将直接从Javascript执行u doPostBack函数。问题的关键在呈现的代码段ab中显示ove也贴在这里：

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

对

  ('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;

函数删除项（元素）{
var uniqueID=element.id；
var postbackID=uniqueID.split（“”）.join（$”；
var row=element.parentNode.parentNode；
var PositionTitle=行。单元格[0]。innerText；
var dialogTitle='永久删除项：'+PositionTitle+'？'；
$（“#删除确认对话框”）.html（“”+“请单击删除以确认删除。
”）；
$（“#删除确认对话框”）。对话框({
标题：dialogTitle，
按钮：{
“删除”：函数（）{
__doPostBack（postbackID，”）；
$（this.dialog（“close”）；}，
“取消”：函数（）{$（this）.dialog（“close”）；}
}
});
$（“#删除确认对话框”）.dialog（'open'）；
返回false；

}

---

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

哇！感谢您的反馈。正如我所说，我是一名新手。在我的文章顶部有一个链接，指向本文所基于的文章，我的客户端代码与文章中的相同。您的方法是inter正在测试，但不是必需的。我在其他地方有断点，可以“逐行”调试，但OP中的一个具体问题是如何在分配给DELETE按钮的函数中设置断点：“DELETE”：函数（）{doPostBack（uniqueID，，）；$（this.dialog（“close”）}，你能帮我解决这部分问题吗？问我如何在uu doPostBack函数上设置断点真是太愚蠢了！我只是简单地将上面的对象符号分成了一行新的u doPostBack，Chrome调试器停在我的断点处。Duh！我接着验证了通过在函数处（使用正确的唯一elementID）。现在，我的调试工作又回到了服务器上webforms页面生命周期的疯狂状态。

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

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;