jQueryのクリック機能とインラインのonclick

私のコードを再構成して、より邪魔にならないようにしようとしています。jQueryのクリック機能とインラインのonclick

主に、アクションを実行するためのリンクがあります。リンクをクリックすると、アクションはajax（ここでコードにはAjaxコードはありません）で実行され、テキストは他のテキストに置き換えられ、ユーザーはアクションを元に戻すことができます。ユーザーが[元に戻す]リンクをクリックすると、ajaxは以前の状況を復元し、ユーザーに提示されたテキストを再度表示します。

私は、単一のhtmlファイル（以下のコード）で私の問題の単純なバージョンを作成しました。 2つの段落があります。インラインonclick呼び出しを使用する最初の段落のリンクをクリックすると、コードは期待通りに機能します。しかし、jQueryのonclick関数を使用する2番目の段落のリンクをクリックすると、元に戻すリンクが機能せず、その理由がわかりません。

助けが必要ですか？どうもありがとう！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 
    <title></title> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script> 
     $(function() {  
      $(".add2").click(function(){ 
       var placeId = $(this).parents(".place").attr("id"); 
       $("#" + placeId + " .add2").remove(); 
       $("#" + placeId + " .actions").append("<span class=\"added\">Added!</span> <a class=\"undoadd2\" href=\"#\">Undo</a>"); 
       return false; 
      }) 
      $(".undoadd2").click(function(){ 
       var placeId = $(this).parents(".place").attr("id"); 
       $("#" + placeId + " .actions").find("span.added, a.add2").remove(); 
       $("#" + placeId + " .actions").append("<a class='add2' onclick='copyPlace(\"" + placeId + "\"); return false;' href='#'>Add place</a>"); 
       return false; 
      }) 
     }); 

     function addPlace(placeId){ 
      $("#" + placeId + " .add").remove(); 
      $("#" + placeId + " .actions").append("<span class=\"added\">Added!</span> <a class=\"undoadd\" href=\"#\" onclick=\"undoAddPlace('" + placeId + "'); return false;\">Undo</a>"); 
      return false; 
     } 

     function undoAddPlace(placeId){ 
      $("#" + placeId + " .actions").find("span.added, a.undoadd").remove(); 
      $("#" + placeId + " .actions").append("<a class='add' onclick='addPlace(\"" + placeId + "\"); return false;' href='#'>Add place</a>"); 
      return false; 
     } 
    </script> 

</head> 
<body id="home"> 
    <div class="place" id="3435910"> 
     <p class="actions"><a href="#" onclick="addPlace('3435910'); return false;" class="add">Add place</a></p> 
    </div> 

    <div class="place" id="3435912"> 
     <p class="actions"><a href="#" class="add2">Add place</a></p> 
    </div> 
</body> 
</html>

出典

2009-05-02 ana

あなたが動的にDOMに新しいアイテムを追加しているので、あなたは新しいアイテムを再度クリックハンドラを登録する必要があります。

これには.liveを使用できます。

更新

のjQuery 1.7以降、.on方法はこれを行うための好ましい方法です。

jQuery 1.9より.liveメソッドが削除されました。

出典

2009-05-02 23:12:16 Wolfr

ライブのみ動作します。この場合、セレクタは各DOM要素に固有のものだと私は考えています。 – tvanfosson

ありがとう@wolfr。私はこれが存在するのか分からなかった。 –

すばらしい答え。私は私のjsコードが動作していたが、何が起こっているのか分からなかった...あなたの答えを読んだ後、私はasp.net mvc webgrid経由でレンダリングしたタグをアンカーにバインドしていたことに気が付いた... help @Wolfr –

あなたが動的にDOMに新しいアイテムを追加しているので、あなたは新しいアイテムに再びclickハンドラを登録する必要があります。 $('...').click(...)を呼び出すとjQueryがハンドラを設定します。

出典

2009-05-02 23:11:14

要素をDOMに追加するときにクリックハンドラーが選択されていません。以下のように見えるライン（複数可）を変更することにより、クリックハンドラを登録するにはjQueryを使用してみてください：あなたがより簡単にそれを行うことができるかもしれない

$("#" + placeId + " .actions").append("<span class=\"added\">Added!</span> <a class=\"undoadd\" href=\"#\" >Undo</a>"); 
$('#' + placeId + " .actions").find("span:last").find("a").click(function() { 
    undoAddPlace(placeId); 
    return false; 
});

に

$("#" + placeId + " .actions").append("<span class=\"added\">Added!</span> <a class=\"undoadd\" href=\"#\" onclick=\"undoAddPlace('" + placeId + "'); return false;\">Undo</a>")

を、しかし、あなたはできるように見えますパラグラフに複数のスパンを追加すると、私は控えめになりました。あなたはおそらく追加することもできますが、私は再選択によってその点が明確になったと思いました。

出典

2009-05-02 23:22:39 tvanfosson

うわー!!あなた方全員に感謝します！私はライブイベントや、最終的な作業コードについて読んだ

は次のとおりです。

$(function() {  
      $(".add2").click(function(){ 
       var placeId = $(this).parents(".place").attr("id"); 
       $("#" + placeId + " .add2").hide(); 
       $("#" + placeId + " .actions").append("<span class=\"added\">Added!</span> <a class=\"undoadd2\" href=\"#\">Undo</a>"); 
       return false; 
      }) 
      $('.undoadd2').live('click', function(){ 
       var placeId = $(this).parents(".place").attr("id"); 
       $("#" + placeId + " .actions").find("span.added, a.undoadd2").remove(); 
       $("#" + placeId + " .add2").show(); 
       return false; 
      });

は、以前私が（削除を使用）のためのアクションを実行するために提供していますテキストを削除します。私はhide/showのためにそれを変更したので、最初の関数でもライブを使う必要はありません。

もう一度おねがいします！ただ、.ENDの使用を実証

出典

2009-05-02 23:34:32 ana

（）より流体溶液のために：セレクタがまったく同じであれば

$(function() {   
    $(".add2").click(function(){ 
      return $(this).parents(".place") 
       .find(".add2") 
        .hide() 
       .end() 
       .find(".actions") 
        .append("<span class=\"added\">Added!</span> <a class=\"undoadd2\" href=\"#\">Undo</a>"); 
    }); 
    $('.undoadd2').live('click', function(){ 
      return $(this).parents(".place") 
       .find(".actions") 
        .find("span.added, a.undoadd2") 
         .remove() 
        .end() 
       .end() 
       .find(".add2") 
        .show(); 
    }); 
});

出典

2009-05-03 11:02:51 ken

jQueryのクリック機能とインラインのonclick

答えて

関連する問題