87,910
社区成员
发帖
与我相关
我的任务
分享jquery变量作用域的问题
$(function(){
var $new=$('<p>sweeeeqwe<span>未改变</span></p>');
$('button').click(function(){
$('body').append($new);
})
$new.children('span').on('click',function(){
$(this).text('改变');
});
})像我这样添加元素,点击'button'按钮只有第一次生效,这是因为作用域的问题吗,
具体什么的有人能说说吗?
...全文
请发表友善的回复…
发表回复
forwardNow 2016-05-11
- 打赏
- 举报
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button type="button">一次</button>
<input type="button" value="多次">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$( function() {
/*
初始化时，创建了一个DOM元素“$new”
当点击按钮时，将 “$new” 添加到 body
*/
var $new = $( '<p>sweeeeqwe<span>1-未改变</span></p>' );
$new.children( 'span' ).on( 'click', function() {
$( this ).text( '改变' );
});
$( 'button' ).click( function() {
$( 'body' ).append( $new );
})
} )
$( function() {
/*
每次点击按钮时，创建了一个DOM元素“$new”，
给它注册事件处理程序，
并将其添加到 body
*/
$( 'input' ).click( function() {
var $new = $( '<p>sweeeeqwe<span>2-未改变</span></p>' );
$new.children( 'span' ).on( 'click', function() {
$( this ).text( '改变' );
});
$( 'body' ).append( $new );
})
} )
</script>
</body>
</html>
天际的海浪 2016-05-10
- 打赏
- 举报
可以改成：
$(function(){
$('button').click(function(){
var $new=$('<p>sweeeeqwe<span>未改变</span></p>');
$new.children('span').on('click',function(){
$(this).text('改变');
});
$('body').append($new);
})
})
天际的海浪 2016-05-10
- 打赏
- 举报
因为你只创建 $new 一次，只有这一个元素。
你每次用$('body').append($new);操作的都是同一个元素。
append()方法是移动元素，不是复制元素。
当第二次执行$('body').append($new);操作时，是把$new元素从页面中取出来，再放到body中。这等于没变化。
天际的海浪 2016-05-10
- 打赏
- 举报
因为你只创建 $new 一次，只有这一个元素。
append()方法是移动元素，不是复制元素。
xuzuning 2016-05-10
- 打赏
- 举报
$(function(){
var $new=$('<p>sweeeeqwe<span>未改变</span></p>');
$('button').click(function(){
$('body').append($new);
$new.on('click', function(){
$(this).text('改变');
});
})
})
