单击动态添加的按钮时如何触发 aspx 脚本

How do I fire a aspx script when a dynamically added button is clicked?

本文关键字：何触发 aspx 脚本 按钮 动态 添加 单击      更新时间：2023-09-26

这是上下文：

我正在构建一个.aspx页面，允许用户管理我们服务器上的一些 xml 文档。页面内容是使用 AJAX 加载的，因此按钮和表单会动态添加到文档中。

如果我在.aspx页面上加载之前在页面中创建静态按钮，我可以轻松地将事件附加到该页面。但是，我使用 jQuery 动态添加和删除按钮和表单。

下面是一个简化的示例：

在下面的jsFiddle中，我假装html文档包含以下脚本：

<script language="C#" type="text/C#" runat="server">
void SaveAllChanges(Object sender, EventArgs e)
{
    Button clickedButton = (Button)sender;
    clickedButton.Text = "foobar";
}
</script>

我有一个包含以下内容的javascript文件： 

$('button.buttonGenerator').click(function() {
    $('.buttonContainer').append(
        '<button onclick="SaveAllChanges">' +
        'Save All Changes!' +
        '</button>'
    );
});

显然，我正在创建的按钮无法以现在的方式运行"保存全部更改"功能。我添加了 onclick 属性，以伪代码样式显示我需要发生的事情。

如何使动态添加的按钮可以运行我在文档顶部的脚本标记中定义的 C# 方法？

这是jsfiddle：http://jsfiddle.net/2XwRJ/

谢谢。

你可以给所有必须保存更改的按钮一个公共类（例如.class="ajaxButton"），并有一个jQuery方法来响应与该类匹配的元素上的单击事件（使用live，以便反映对DOM的更新）。

$("button.ajaxButton").live("click", function(){
  // Perform your Ajax callback to run server-side code
});
你需要

做的是使用类似.的东西。

$(document).ready(function() {
  $('button.buttonGenerator').click(function() {
    $('.buttonContainer').append(
        '<button id="#dynamicCommentButton" onclick="SaveAllChanges">' +
        'Save All Changes!' +
        '</button>'
    );
  });
  $(document).on('click', '#dynamicCommentButton', function() {
    alert($(this).attr('id'));
  });
});

您将无法像那里那样添加按钮，因为此处的代码只是将其添加为 HTML DOM 元素，而 onclick 属性将是客户端元素上的。因此，单击该按钮将尝试触发一个SaveAllChanges的javascript函数

$('.buttonContainer').append(
        '<button onclick="SaveAllChanges">' +
        'Save All Changes!' +
        '</button>'
 );

最好的办法是在javascript中创建该SaveAllChanges函数，然后您可以从那里处理它。我认为您能够做到这一点的两种方法是：

  1. 有一个 http 端点设置（脚本服务、Web API 或只是发布到页面），你可以从你的 JavaScript 使用 Ajax 调用它。然后，您可以传递任何所需的参数。
  2. 你可以在页面上有一个隐藏的元素和隐藏的按钮，这样当调用javascript时，它会填充你需要的任何参数，然后单击隐藏的按钮并将页面发布回去。

就个人而言，我会从用户体验的角度选择第一种方法，因为页面不会每次都回发。我使用了类似于第二种方法的东西，它工作正常，但感觉很笨拙。

相关文章：