jQueryとHTMLコードにハイパーリンクを置き換え、サーバからロード

Question

私のHTMLコードはほとんど同じで、約100のdivとハイパーリンクがあります。

<div><a href="#" onclick="load_edit(1, 1);" class="painike">Edit 1</a></div> 
<div><a href="#" onclick="load_edit(1, 2);" class="painike">Edit 2</a></div> 

を私のjQueryのコードは、サーバーからload_edit.phpロードし、ハイパーリンクを交換する必要があります関数を呼び出した。とにかく、私のコードはハイパーリンクをHTMLコードに置き換えず、その理由を知らない。なにが問題ですか？

一方、同じ機能を呼び出す約100個のハイパーリンクがあるので、これをよりうまくいく方法を聞くのは良いことです。私はインラインJavaScriptコードを取り除き、機能を改善したいと思います。

Answer 1

コードでは、$(this)はクリックされたDOM要素を参照していません。詳細について
は、匿名関数を作成するとき、それは（グローバルオブジェクトに）JavaScriptを自身で設定されていないthisを、同じスコープ内のすべてのローカル変数に保持しますが、What context is the jQuery.post callback function invoked in?

を参照しますか、呼び出されたときにオーバーライドされます。
— Yehuda Katz

私は適切なクラスを持つすべてのリンクにクリックハンドラをバインド示唆しています。次に、AJAX呼び出しを行う前に、クリックされた要素への参照を定義します。このローカル変数は、匿名の "done"関数で利用できるようになります。

data attributesを使用してリンクごとに変数を定義することもお勧めします。このデータは、jQueryのdata()メソッドを使用してDOMから取得できます。

jQuery('.painike').on('click', function(e) { 
 
    
 
    e.preventDefault(); 
 

 
    var $this = $(this), 
 
     kaavio = $this.data('kaavio'), 
 
     ottelu = $this.data('ottelu'); 
 

 
    jQuery.post("//posttestserver.com/post.php", { 
 
     kaavio: kaavio, 
 
     ottelu: ottelu 
 
    }).done(function(data) { 
 
     $this.replaceWith(data); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div><a href="#" class="painike" data-kaavio="1" data-ottelu="1">Edit 1</a></div> 
 
<div><a href="#" class="painike" data-kaavio="1" data-ottelu="2">Edit 2</a></div>

それは正確に重複していないのですけれどもここでは、別の一見関連のポストです：あなた.done()コールバックインサイド
Uncaught TypeError: Cannot read property 'createDocumentFragment' of undefined

Answer 2

、thisがクリックされた要素を指すものではありません。代わりに、要素参照をload_edit()に渡すことができます。

<div><a href="#" onclick="load_edit(1, 1, this);" class="painike">Edit 1</a></div> 
<div><a href="#" onclick="load_edit(1, 2, this);" class="painike">Edit 2</a></div> 

function load_edit(kaavio, ottelu, element) { 
    $.post("load_edit.php", { kaavio: kaavio, ottelu: ottelu }) 
     .done(function (data) { 
      $(element).replaceWith(data); 
     }); 
}