点击动态添加按钮时，如何激发一个aspx脚本？

我建立一个.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/

感谢。

来源

2012-08-10 bdrelling

您可以给所有必须保存更改的按钮设置一个常用类（例如class =“ajaxButton”），并且有一个jQuery方法响应与该类匹配的元素上的点击事件（使用live，以便更新DOM ）。

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

来源

2012-08-10 20:21:07

live（）从jQuery 1.7开始已弃用。（'click'）; – sent1nel 2012-08-10 20:24:06

这不是问题的jQuery代码。它实际上将.ajax（）方法与我的服务器上的aspx脚本连接起来。 – bdrelling 2012-08-10 21:26:00

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

$(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-10 20:23:28 sent1nel

对不起，如果我不明白，但这是如何帮助我在我的服务器上运行一个aspx脚本，而不仅仅是分配一个函数的ID？我知道jQuery应该如何工作，但我不知道如何设置我的代码以将数据发送到我的服务器上的aspx脚本。 – bdrelling 2012-08-10 21:26:33

噢，对不起，您的问题（“我怎样才能让它动态添加按钮可以运行我在文档顶部脚本标记中定义的C＃方法？”）稍微含糊不清。让一个AJAX调用传递变量被保存？否则，我会说使用websockets。 http://stackoverflow.com/questions/8492940/jquery-ajax-post-using-asp-net – sent1nel 2012-08-11 03:19:34

你是不是要能够添加按钮，就像你拥有了它有如下的代码只是将其作为一个HTML DOM元素和onclick属性将成为客户端元素。其结果是，单击按钮将会尝试火SaveAllChanges javascript函数

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

将是最好什么是创造的JavaScript SaveAllChanges功能，那么你可以从那里处理它。我看你能做到这一点的方法有两种：

有一个HTTP端点设置（脚本服务，Web API或只是张贴到网页），您调用使用Ajax从您的JavaScript。然后你可以通过任何需要的参数。
你可以在页面上有一个隐藏的元素和隐藏的按钮，这样当调用javascript时，它会填充你需要的任何参数，然后单击隐藏的按钮并将页面返回。

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

来源

2012-08-11 14:59:07

点击动态添加按钮时，如何激发一个aspx脚本？

回答

相关问题