0

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

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().

有人可以描述我如何解决下面的代码。当页面是静态的时，它会按预期工作。当对我的代码进行一般改进的评论也受到赞赏时，它不起作用，<!-- ajax fills this in -->
因为我对 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>
4

2 回答 2

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();
于 2012-12-24T21:41:55.903 回答
1

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

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

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

事件被绑定到祖先，并且您添加一个选择器参数作为事件的目标。

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

 /* 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. 当多个事件的处理程序相同时，事件也可以注册为空格分隔的字符串，（或仅注册事件）使用以下语法：

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

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

于 2012-12-24T22:13:23.117 回答