Question

我知道在阅读分配后我感到很困惑......

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().

有人可以描述我如何解决下面的代码。当页面是静态时，它按预期工作。 时，它不起作用一般来说，改进我的代码的评论也很受欢迎，因为我对jquery很新。

谢谢，圣诞快乐！

    <!DOCTYPE html> 
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type='text/javascript'>
     $(document).ready(function() {  
            $('form .edit').on( {
                mouseenter: function() {
                    $(this).css({cursor:'pointer', color: 'red'});
              },
                mouseleave: function() {
                    $(this).css({cursor:'default', color: 'rgb(204, 204, 204)'});
              },
              click: function() {
                    var $t = $(this).parents('table').attr('id');
                    var $tr = '#'+ this.id;
                    var tData = $($tr +' > td'); 
                    $(tData).each(function () { 
                          var td = '#'+ this.id;
                          var $th = $(td).closest('table').find('th').eq($(td).index()).text();
                          var html = $(this).html();
                          var input = $("<input id='"+$t+$tr+this.id+"' name='"+$t+"="+$th+"'  />");
                          input.val(html);
                          $(this).html(input);
                    });             
                    $('.edit').off();
                }
            });
     });  
</script>
</head>
<body>
<div>
<form id="userForm" method='get'>
<!-- ajax fills this in -->
    <table class='table' id='user'>
        <thead>
            <tr class='head'>
                <th>head 1</th>
                <th>head 2</th>
            </tr>
        </thead>
        <tfoot><tr></tr></tfoot>
        <tbody>
            <tr class='edit' id='1' title='click to edit'>
                <td id='1a'>content 1a</td>
                <td id='1b'>content 1b</td>
            </tr>
            <tr class='edit' id='0' title='click to edit'>
                <td id='0a'>content 0a</td>
                <td id='0b'>content 0b</td>
            </tr>
        </tbody>
    </table> 
<input class='ajaxSubmitAndReturn' type='submit' value='Submit' />
<input class='ajaxCancel' type='submit' value='Cancel' />
<!-- end of ajax -->
</form>
</div>
</body>
</html>

Answer 1

在加载ajax内容后，您需要调用jquery代码块。

您可以将jQuery代码包装在一个函数中：

    function updateStuff() {
        $('form .edit').on( {
            mouseenter: function() {
                $(this).css({cursor:'pointer', color: 'red'});
          },
            mouseleave: function() {
                $(this).css({cursor:'default', color: 'rgb(204, 204, 204)'});
          },
          click: function() {
                var $t = $(this).parents('table').attr('id');
                var $tr = '#'+ this.id;
                var tData = $($tr +' > td'); 
                $(tData).each(function () { 
                      var td = '#'+ this.id;
                      var $th = $(td).closest('table').find('th').eq($(td).index()).text();
                      var html = $(this).html();
                      var input = $("<input id='"+$t+$tr+this.id+"' name='"+$t+"="+$th+"'  />");
                      input.val(html);
                      $(this).html(input);
                });             
                $('.edit').off();
            }
        });
    }

然后，在ajax调用填充内容之后，您可以简单地调用：

updateStuff();

Answer 2

使用on()有两种主要方式。

一个是$(selector).on(handler)，如果在触发代码时存在选择器表示的元素，它将起作用，但不考虑将来添加到DOM的元素。

另一种方法是将on()委托给页面中的永久资产。这可以是选择器的任何祖先，甚至是document

事件绑定到祖先，并为事件添加选择器参数 target 。

如果在您的情况下，如果表格是永久资产，您可以写：

 /* if "form" is added by ajax, can use "document" or an ancestor of "form" that is permament in page*/
$('form').on( {
    mouseenter: function() {
                $(this).css({cursor:'pointer', color: 'red'});
      },
    mouseleave: function() {
                $(this).css({cursor:'default', color: 'rgb(204, 204, 204)'});
     },
     click: function() {/*...*/}
 }, '.edit');

将来会添加添加到DOM的任何类edit元素。

在您的情况下，您使用的是events map。当使用以下语法将hanlder与多个事件相同（或仅在事件上注册）时，事件也可以注册为空格分隔的字符串：

 $('form').on('myCustomEvent submit', '.edit', function(){
      doSomething()
});

现在查看文档，并注意[]表示的可选选择器，事件映射等，并与文档中的这些示例和示例进行比较。

jQuery 1.7 - 稍后添加到文档中的绑定元素

2 个答案: