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方法响应与该类匹配的元素上的click事件（使用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函数然后你可以从那里处理它。我认为你能够做到这一点的两种方式是：

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

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

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

3 个答案: