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

Question

下面是上下文：

我正在构建一个.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>'
    );

});

显然，我正在创建的按钮不能以现在的方式运行函数SaveAllChanges。我添加了onclick属性，以一种伪代码的方式显示我需要发生的事情。

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

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

谢谢。

Answer 1

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

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

Answer 2

您需要做的是使用类似于..

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

Answer 3

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

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

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

1. 有一个http端点设置(脚本服务，web或者只是发布到一个页面)，你可以从你的javascript中使用Ajax来调用它。然后，您可以传递任何需要的参数。
2. 您可以在页面上有一个隐藏的元素和隐藏的按钮，以便在调用javascript时填充您需要的任何参数，然后单击隐藏的按钮并回发页面。

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