5

簡単なコードを次に示します。

HTML:

<div id="close">Click me</div>

JS コード:

$("#close").click(function(){
    alert("1");
    $(this).attr('id','expand');
});



$("#expand").live('click', function(){
    alert("2");
    $(this).attr('id','close');            
});

問題: 「閉じる」をクリックすると、自動的に live() も呼び出されます。jsfiddle でこれを参照してください: http://jsfiddle.net/uFJkg/

同じ要素の id を「close」から「expand」に変更しているためですか? この問題を解決するにはどうすればよいですか?

私が試してみました：

 $("#expand").die().live('click', function()

しかし、うまくいきませんでした。event.stopPropagation() を試しましたが、それも役に立ちませんでした。ID「expand」の別のdivを作成してdocument.readyで非表示にしようとしましたが、何らかの理由でそれも機能していません。

次に、 live() がjQuery 1.7+で非推奨になったことを読んでから試しました:

$("#expand").on('click', function(){

それも機能していません。

何かご意見は？新鮮な目は、私が欠けているものを見つけることができると思います.

ありがとう。

4

3 に答える 3

10

この場合、両方のデリゲートイベント（別名ライブ）ハンドラーが必要です。なぜなら、両方を切り替えているので、idこの切り替えにより、両方idがDOMに対して動的になります。

$("body").on("click", "#close", function(){
    alert("1");
    $(this).attr('id','expand');
});

$("body").on("click", "#expand", function(){
    alert("2");
    $(this).attr('id','close');            
});

デモ

ノート

非推奨live()であるため、デリゲートイベント処理に使用する代わりに。live().on()

于 2012-08-16T19:41:30.410 に答える
3

これは、liveがイベントをアタッチする方法と、イベントのバブリングのしくみに関係しています。

.liveにイベント ハンドラをアタッチしますdocument。ドキュメントがイベントを登録するとtarget、そのイベントが何であるかを調べます。に渡されたセレクターと一致する場合.live、ハンドラーを起動します。

をクリックすると#close、次のようになります。

  1. に登録されたクリック イベント#close、ハンドラが起動します。
  2. #closeに変更されます#expand
  3. クリック イベントは、document
  4. クリック イベントが に登録されdocument、ドキュメントはターゲット要素の ID が である#expandことを確認し、イベント ハンドラを起動します。

stopPropagation()これを解決する方法は、ハンドラーに追加することです。

$("#close").click(function(e){
  if(!e) { e = window.event; }
  e.stopPropagation();

  alert("1");
  $(this).attr('id','expand');
});

ただし、委任されたイベントを使用したりlive、調べたり、処理しdelegateたりしないことをお勧めします。on

また、ID を変更しないことをお勧めします。閉じる/展開するアイデアを維持したい場合は、次のようなことを試してください。

<div id="toggler" class="close">Close</div>

$('#toggler').on('click',function() {
    $(this).toggleClass('close').toggleClass('expand');
});

1 つのイベント ハンドラー、永久 ID にフックするため委任なし

于 2012-08-16T19:44:48.950 に答える
0

まず第一に、ID のランタイムを変更するのはあまりきれいではありません。あなたはその結果の1つに直面しています。

データ属性の使用を検討してください。jQuery は data プロパティにアクセスすることでそれらを読み取ることができます。

例えば。

$("#myObject").data("expanded", true);

そのため、ID を変更する必要はありません。

于 2012-08-16T19:42:58.027 に答える