日期:2014-05-16  浏览次数:20316 次

请教Jquery的on函数用法
本帖最后由 haokan1113 于 2013-11-02 11:49:33 编辑
<!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

------解决方案--------------------
完全 没问题啊

<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