1

私のウェブサイトでは、クイック編集/保存のためにインライン編集を行っています。最初の実行では問題なく動作しますが、jQuery が<a>タグを再作成した後、動作を停止します。jQuery は次のとおりです。

$('form#notice').submit(function(e){
    e.preventDefault();
    var a = $('form#notice input[name=\'act\']').val();
    var n = $('input[name=\'notice\']').val();
    $('span#form').hide(); $('span#adminnotice').html(n).show(); $('span#edit').show();
    $.ajax({
        type: 'POST',
        data: { act:a, set:n },
        success: function(result){
            $('span#edit').html('<img src=\'./images/check.png\' />').delay(1000).fadeOut('slow',     function(){
            $(this).html('<a href=\'#\'>[edit]</a>').fadeIn('fast');
            });
        }
    });
    return false;
});

$('span#edit a').click(function(e){
    e.preventDefault();
    var input = $('span#adminnotice').text();
    var lngth = input.length;
    $('form#notice').html(
    \"<input type='text' name='notice' value='\"+input+\"' style='width:\"+((lngth+1)*6)+\"px' onkeyup=\\\"this.style.width=((this.value.length+1)*6)+'px';\\\" maxlength='256' />\" +
    \"<input type='hidden' name='act' value='adminnotice' />\" +
    \"<input type='submit' value='Update' />\"
    );
    $('span#adminnotice').hide();$('span#edit').hide().html('<img src=\'./images/saving2.gif\' />');$('span#form').show();
    return false;
});

最初のランスルーの後、.click()を削除してから<a>再度追加するため、関数は機能しなくなります。全体を複製して AJAX.click()の一部に入れれば動作させることができますsuccess:が、私が知らない何かがあるに違いないことはわかっています。なぜなら、jQuery の開発者がプロ​​グラマーに同じコードを 2 回。

ご協力ありがとうございます:D

4

3 に答える 3

4

コードを複製する必要はありません。クリック ハンドラーをローカル変数に割り当てて再利用できます。

var onClick = function(e) { ... };
$('span#edit a').click(onClick);

または、削除されない要素にハンドラーを適用するだけです (ハンドラーは、イベントが伝播するときに引き続きトリガーされます)。

$('#containerDiv').on('click', 'span#edit a', function(e) { ... });
于 2012-07-12T15:34:41.237 に答える
2

jquery のデリゲートを使用してみてください。

http://api.jquery.com/delegate/

説明: ルート要素の特定のセットに基づいて、現在または将来、セレクターに一致するすべての要素の 1 つ以上のイベントにハンドラーをアタッチします。

したがって、送信は次のように書き換えることができます...

$('body').delegate('#notice','submit',function(e){
//do stuff here
});
于 2012-07-12T15:38:08.770 に答える
2 
$('body')on('click', 'span#edit a', function(e){
  e.preventDefault();
  var input = $('span#adminnotice').text();
  var lngth = input.length;
  $('form#notice').html(
  \"<input type='text' name='notice' value='\"+input+\"' style='width:\"+((lngth+1)*6)+\"px' onkeyup=\\\"this.style.width=((this.value.length+1)*6)+'px';\\\" maxlength='256' />\" +
  \"<input type='hidden' name='act' value='adminnotice' />\" +
  \"<input type='submit' value='Update' />\"
);
  $('span#adminnotice').hide();$('span#edit').hide().html('<img src=\'./images/saving2.gif\' />');$('span#form').show();
  return false;
});
于 2012-07-12T15:40:17.043 に答える