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

主な使い方は2つありますon()。

1 つは$(selector).on(handler)、コードが起動されたときにセレクターによって表される要素が存在する場合に機能しますが、DOM に追加される将来の要素を考慮していません。

もう 1 つは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');

edit今後 DOM に追加されるすべてのクラス要素が含まれます。

あなたの場合、を使用していevents mapます。次の構文を使用して、複数のイベントでハンドラが同じになる場合 (または単にイベントに登録する場合)、イベントをスペースで区切られた文字列として登録することもできます。

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

次に、ドキュメントを見て、オプションのセレクター、イベント マップなどに注目し、[]これらの例とドキュメント内の例を比較してください。

于 2012-12-24T22:13:23.117 に答える
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 に答える