I have a page index.html:
我有一个页面index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Lufia</title>
<script src="js/jquery.js" language="javascript"></script>
<script language="javascript">
$(document).ready(function() {
$("button").click(function() {
$('#mydiv').html( 'Loading... ').load('welcome.html');
$(this).hide();
});
});
</script>
</head>
<body>
<button>ajax</button><div id="mydiv"></div>
</body>
</html>
In this code when button is clicked in midiv welcome.html is loaded and button gets hidden.
在此代码中,在midiv中单击按钮时,将加载welcome.html并隐藏按钮。
welcome.html is as follows:
welcome.html如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Lufia</title>
</head>
<body>
<button>New Button</button>
</body>
</html>
This new button's onClick is not working. Why?
这个新按钮的onClick不起作用。为什么?
5 个解决方案
#1
12
Simple solution here - you'll need to use the jQuery .live() function to add an event handler for the new button.
这里的简单解决方案 - 您需要使用jQuery .live()函数为新按钮添加事件处理程序。
$("#newButton").live('click',function(){
// Do stuff here
});
When you initially created the .click() handler, that second button was not yet in the DOM, so jQuery could not attach an event handler to it. The .live() function will work for any element that is already in the DOM and also any element that will be added in the future (e.g. from an ajax call).
当您最初创建.click()处理程序时,第二个按钮尚未在DOM中,因此jQuery无法将事件处理程序附加到它。 .live()函数适用于DOM中已有的任何元素以及将来添加的任何元素(例如来自ajax调用)。
You might want to give your new button (from the ajax call) a new and different ID as the selector $("button") will capture both your buttons (even though one is hidden).
你可能想给你的新按钮(来自ajax调用)一个新的不同的ID,因为选择器$(“按钮”)将捕获你的按钮(即使一个被隐藏)。
NOTE!
Since version 1.7 of jQuery, the live() method has been deprecated!. As of version 1.9 this function will be removed completely... The correct way to deal with event handlers of these dynamically added elements is now to use the on() function.
从jQuery的1.7版本开始,live()方法已被弃用!从版本1.9开始,此函数将被完全删除...处理这些动态添加元素的事件处理程序的正确方法现在是使用on()函数。
#2
3
Live is deprecated. You should use on.
Live已弃用。你应该使用。
$(document).on("click","button", function () {
$(document).on(“click”,“button”,function(){
is the live/delegated format of on.
是on的实时/委派格式。
#3
2
Because the button hasn't got anything bound to it.
因为按钮没有绑定任何东西。
So in welcome.html you would have to add code to handle it.
所以在welcome.html中你必须添加代码来处理它。
Alternatively; You could bind the onclick handler in a function and then on the ajax.done() method bind that handler to the new button.
另外;您可以在函数中绑定onclick处理程序,然后在ajax.done()方法上将该处理程序绑定到新按钮。
Best method would be to do something like: Note This has not been tested AT all.
最好的方法是做类似的事情:注意这还没有经过测试。
<script language="javascript">
$(document).ready(function(){
var buttonClickEvent = function(){
$.ajax({
url: "test.html",
}).done(function(results) {
$('#mydiv').html(results);
$('button').live('click',buttonClickEvent);
});
}
$("button").click(buttonClickEvent);
</script>
Alternatively:
welcome.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Lufia</title>
<body><button>New Button</button>
<script>
$(document).ready(function(){
$("button").click(function(){
//do something
});
});
</script>
#4
0
Check properly that you given the right path for jquery in your code. It might be the reason that the code is not working.....
正确检查您在代码中为jquery指定了正确的路径。这可能是代码无法运行的原因.....
#5
-1
It is usually because of the files included incorrectly.
通常是因为文件包含不正确。
I have included the jquery.hotkeys-0.7.9.min.js and it distoryed my maskings.
我已经包含了jquery.hotkeys-0.7.9.min.js,这让我的掩饰更加令人失望。
After 2 hours of code checking, when I removed the file. The problem was solved;
经过2个小时的代码检查,我删除了文件。问题解决了;
:)
#1
12
Simple solution here - you'll need to use the jQuery .live() function to add an event handler for the new button.
这里的简单解决方案 - 您需要使用jQuery .live()函数为新按钮添加事件处理程序。
$("#newButton").live('click',function(){
// Do stuff here
});
When you initially created the .click() handler, that second button was not yet in the DOM, so jQuery could not attach an event handler to it. The .live() function will work for any element that is already in the DOM and also any element that will be added in the future (e.g. from an ajax call).
当您最初创建.click()处理程序时,第二个按钮尚未在DOM中,因此jQuery无法将事件处理程序附加到它。 .live()函数适用于DOM中已有的任何元素以及将来添加的任何元素(例如来自ajax调用)。
You might want to give your new button (from the ajax call) a new and different ID as the selector $("button") will capture both your buttons (even though one is hidden).
你可能想给你的新按钮(来自ajax调用)一个新的不同的ID,因为选择器$(“按钮”)将捕获你的按钮(即使一个被隐藏)。
NOTE!
Since version 1.7 of jQuery, the live() method has been deprecated!. As of version 1.9 this function will be removed completely... The correct way to deal with event handlers of these dynamically added elements is now to use the on() function.
从jQuery的1.7版本开始,live()方法已被弃用!从版本1.9开始,此函数将被完全删除...处理这些动态添加元素的事件处理程序的正确方法现在是使用on()函数。
#2
3
Live is deprecated. You should use on.
Live已弃用。你应该使用。
$(document).on("click","button", function () {
$(document).on(“click”,“button”,function(){
is the live/delegated format of on.
是on的实时/委派格式。
#3
2
Because the button hasn't got anything bound to it.
因为按钮没有绑定任何东西。
So in welcome.html you would have to add code to handle it.
所以在welcome.html中你必须添加代码来处理它。
Alternatively; You could bind the onclick handler in a function and then on the ajax.done() method bind that handler to the new button.
另外;您可以在函数中绑定onclick处理程序,然后在ajax.done()方法上将该处理程序绑定到新按钮。
Best method would be to do something like: Note This has not been tested AT all.
最好的方法是做类似的事情:注意这还没有经过测试。
<script language="javascript">
$(document).ready(function(){
var buttonClickEvent = function(){
$.ajax({
url: "test.html",
}).done(function(results) {
$('#mydiv').html(results);
$('button').live('click',buttonClickEvent);
});
}
$("button").click(buttonClickEvent);
</script>
Alternatively:
welcome.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Lufia</title>
<body><button>New Button</button>
<script>
$(document).ready(function(){
$("button").click(function(){
//do something
});
});
</script>
#4
0
Check properly that you given the right path for jquery in your code. It might be the reason that the code is not working.....
正确检查您在代码中为jquery指定了正确的路径。这可能是代码无法运行的原因.....
#5
-1
It is usually because of the files included incorrectly.
通常是因为文件包含不正确。
I have included the jquery.hotkeys-0.7.9.min.js and it distoryed my maskings.
我已经包含了jquery.hotkeys-0.7.9.min.js,这让我的掩饰更加令人失望。
After 2 hours of code checking, when I removed the file. The problem was solved;
经过2个小时的代码检查,我删除了文件。问题解决了;
:)