0

这是上下文：

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

谢谢。

4

3 回答 3

1

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

$("button.ajaxButton").live("click", function(){
  // Perform your Ajax callback to run server-side code
});
于 2012-08-10T20:21:07.283 回答
1

你需要做的是使用类似 ..

$(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'));
  });
});
于 2012-08-10T20:23:28.480 回答
1

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

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

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

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

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

于 2012-08-11T14:59:07.770 回答