使用Ajax加载UserControl时Javascript代码不起作用
谢谢斯蒂尔加解决了我的问题。 我只是创建了一个js文件,并在我将该文件添加到UserControl之后将所有代码写入其中,在获得该UserControl的html之后,我使用$(“#DivID”).html(UserControlHTML); 现在开始工作了 大家好, 我使用Ajax和Webservice加载用户控件。没关系,我可以很容易地得到UserControl的html代码,但是有一个问题 例如,UserControl的html代码就是这样的使用Ajax加载UserControl时Javascript代码不起作用,javascript,asp.net,html,ajax,Javascript,Asp.net,Html,Ajax,谢谢斯蒂尔加解决了我的问题。 我只是创建了一个js文件,并在我将该文件添加到UserControl之后将所有代码写入其中,在获得该UserControl的html之后,我使用$(“#DivID”).html(UserControlHTML); 现在开始工作了 大家好, 我使用Ajax和Webservice加载用户控件。没关系,我可以很容易地得到UserControl的html代码,但是有一个问题 例如,UserControl的html代码就是这样的 <h3>Header</h3
<h3>Header</h3>
<div id="content">
<p>lorem ipsum dolor sit amet...</p>
</div>
<script type="text/javascript">
alert("This is a message");
</script>
<h3>Footer</h3>
Web服务代码(LoadUserControl.asmx)
当我得到这个html代码并将其插入到div的innerHTML中时。
html看起来应该是这样的。但是写在usercontrol上的javascript代码不起作用。
它应该会提醒我,但不会。似乎分配innerHtml属性不会触发JS执行。如果这是一种您经常使用的模式,您可以按照约定定义一些函数,例如ajaxCallbackControlName,其中ControlName是当前控件的名称。然后将警报包装在该函数中,并在调用警报的位置调用该函数。这样,控件在正常加载时(而不是通过服务)也会工作。另一方面,在服务的success函数中,您应该能够调用如下函数:
window["ajaxCallback" + controlName]();
function Success(result) {
$("Icerik").html(result);
}
(有关更多详细信息,请参阅)
但是,使用这种方法,如果页面上有同一控件的多个实例,则会出现问题,因为所有实例都将被触发。您可以通过将随机字符串作为参数添加到服务并将其添加到函数名来解决此问题
所有这些都是一个超级通用的解决方案,应该适用于任何控件和其中的任何js代码,但实际上您可能需要一个更具体的解决方案,比如在js文件中加载回调函数,并通过服务生成用于加载特定控件的特定函数。然后,您可以在设置innerHtml属性后调用所需的回调函数
编辑:
似乎设置innerHTML不会定义函数。所以你应该自己评估代码。下面是一个仅限于客户端的简单示例
<html>
<body>
test
<br />
<div id="testDiv"></div>
<br />
<input type="button" onclick="insert()" value="Insert" />
<script type="text/javascript">
function insert(){
var element = document.getElementById("testDiv");
element.innerHTML = "test innerHTML <script id='loadScript' type='text/javascript'> function foo() {alert('test'); } <\/script> ";
eval(document.getElementById("loadScript").innerHTML);
foo();
}
</script>
</body>
</html>
似乎分配innerHtml属性不会触发JS执行。如果这是一种您经常使用的模式,您可以按照约定定义一些函数,例如ajaxCallbackControlName,其中ControlName是当前控件的名称。然后将警报包装在该函数中,并在调用警报的位置调用该函数。这样,控件在正常加载时(而不是通过服务)也会工作。另一方面,在服务的success函数中,您应该能够调用如下函数:
window["ajaxCallback" + controlName]();
function Success(result) {
$("Icerik").html(result);
}
(有关更多详细信息,请参阅)
但是,使用这种方法,如果页面上有同一控件的多个实例,则会出现问题,因为所有实例都将被触发。您可以通过将随机字符串作为参数添加到服务并将其添加到函数名来解决此问题
所有这些都是一个超级通用的解决方案,应该适用于任何控件和其中的任何js代码,但实际上您可能需要一个更具体的解决方案,比如在js文件中加载回调函数,并通过服务生成用于加载特定控件的特定函数。然后,您可以在设置innerHtml属性后调用所需的回调函数
编辑:
似乎设置innerHTML不会定义函数。所以你应该自己评估代码。下面是一个仅限于客户端的简单示例
<html>
<body>
test
<br />
<div id="testDiv"></div>
<br />
<input type="button" onclick="insert()" value="Insert" />
<script type="text/javascript">
function insert(){
var element = document.getElementById("testDiv");
element.innerHTML = "test innerHTML <script id='loadScript' type='text/javascript'> function foo() {alert('test'); } <\/script> ";
eval(document.getElementById("loadScript").innerHTML);
foo();
}
</script>
</body>
</html>
您是否正在使用扩展器来执行此操作?发布更多的服务器端代码会有很大帮助。我添加了所有在整个场景中有效的代码。您是否使用扩展器来实现这一点?发布更多的服务器端代码会有很大帮助。我添加了所有在整个场景中有效的代码。我尝试了所有东西,之后,我添加到UserControl,并使用$(“Icerik”).html(result);tool.js中的Javascripts代码正在运行。谢谢。我尝试了所有的东西,之后,我添加到UserControl,并使用$(“Icerik”).html(result);tool.js中的Javascripts代码正在运行。非常感谢。