请教Jquery的on函数用法

haokan1113 2013-11-02 11:48:32

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type='text/css'>
div{
border:1px solid black;
cursor:pointer;
width:200px;
margin:10px;
}
</style>
</head>

<body>
<input type='button' id='button' value='Create New Element'/>
<div class='future'>Already on page</div>

<script type='text/javascript' src='../jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('#button').click(function(){
$('body').append('<div class="future">I am a new div</div>');
});

$('div').on('click',function(){
$(this).css({'color':'red','font-weight':'bold'}).html('You clicked me'); //想实现单击新增加的div后，会改变div的内容和字体
});
});
</script>
</body>
</html>

这里用on添加的click事件始终不执行，请教该如何实现？我现在用的是jquery 1.10.2

...全文

262 13 打赏收藏转发到动态举报

写回复

用AI写文章

13 条回复

切换为时间正序

请发表友善的回复…

发表回复

haokan1113 2013-11-02

打赏
举报

live也试过，一样不起作用

魔术世界中文版 2013-11-02

打赏
举报

楼主放弃on用live如何



   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
   <script type='text/javascript'>
 $(document).ready(function(){
 $('#button').click(function(){
 $('body').append('<div class="future">I am a new div</div>');
 });

 $('div.future').live('click',function(){
 $(this).css({'color':'red','font-weight':'bold'}).html('You clicked me');         //想实现单击新增加的div后，会改变div的内容和字体
}); 
 });
   </script>

l676331991 2013-11-02

打赏
举报


$('body').on('click',"div",function(){
    $(this).css({'color':'red','font-weight':'bold'}).html('You clicked me');        
});

函数原型： .on( events [, selector ] [, data ], handler(eventObject) ) jquery API on

不要再听到有人说live了！！！

孟子E章 2013-11-02

打赏
举报

$('div').on('click', function () 也可以，对事先存在的是可以的

haokan1113 2013-11-02

打赏
举报

谢啦，还发现个问题,on函数必须这样写 $('body').on('click', "div",function () { }); 少一个参数就不行哒 $('div.future').live('click',function(){ });

haokan1113 2013-11-02

打赏
举报

引用 9 楼 net_lover 的回复:

完全没问题啊

<html>
<head>
  <title>New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type='text/css'>
    div
    {
      border: 1px solid black;
      cursor: pointer;
      width: 200px;
      margin: 10px;
    }
  </style>
</head>
<body>
  <input type='button' id='button' value='Create New Element' />
  <div class='future'>
    Already on page</div>
  <script type='text/javascript' src='jquery-1.10.2.min.js'></script>
  <script type='text/javascript'>
    $(function () {
      $('#button').click(function () {
        $('body').append('<div class="future">I am a new div</div>');
      });

      $('body').on('click', "div",function () {
        $(this).css({ 'color': 'red', 'font-weight': 'bold' }).html('You clicked me');         //想实现单击新增加的div后，会改变div的内容和字体
      });
    });
  </script>
</body>
</html>

多谢，问题找到了，我的JQUERY是以前下载的一个jquery.1.26.js，重新下了一个jquery-1.10.2.min.js就好了，谢谢

孟子E章 2013-11-02

打赏
举报

完全没问题啊

<html>
<head>
  <title>New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type='text/css'>
    div
    {
      border: 1px solid black;
      cursor: pointer;
      width: 200px;
      margin: 10px;
    }
  </style>
</head>
<body>
  <input type='button' id='button' value='Create New Element' />
  <div class='future'>
    Already on page</div>
  <script type='text/javascript' src='jquery-1.10.2.min.js'></script>
  <script type='text/javascript'>
    $(function () {
      $('#button').click(function () {
        $('body').append('<div class="future">I am a new div</div>');
      });

      $('body').on('click', "div",function () {
        $(this).css({ 'color': 'red', 'font-weight': 'bold' }).html('You clicked me');         //想实现单击新增加的div后，会改变div的内容和字体
      });
    });
  </script>
</body>
</html>

zhjdg 2013-11-02

打赏
举报

$(document).on('click','div', function() {
				$(this).css({
					'color' : 'red',
					'font-weight' : 'bold'
				}).html('You clicked me'); //想实现单击新增加的div后，会改变div的内容和字体
			});

haokan1113 2013-11-02