php - jQueryを使用して動的に作成されたdivコンテンツを変更する

Question

私はここでかなりイライラしています。

レコードのテーブルがあります。各レコードの横にはボタンがあります。そのレコードの横にあるボタンをクリックすると、jqueryAJAX呼び出しが実行されます。

    <script language="JavaScript" type="text/javascript">
<!--
function swapContent(cv) {
    $("#myDiv").html('<div align="center"><img src="images/loader.gif"/></div>').show();
    var url = "process.php";
    $.post(url, {contentVar: cv} ,function(data) {
       $("#myDiv").html(data).show();
    });
}
//-->
</script>

関連するHTML：

<div id="myDiv" align="center"><a href="#" onClick="return false" onmousedown="javascript:swapContent('do_stuff');"><img src='images/icon.png' border='0'></a></div>

HTMLリンクをクリックすると、div "myDiv"の内容が、process.phpへのajax呼び出しの出力に変更されます。これはすべて問題ありませんが、これらのdivは数十個あり、パラメーターcvだけでなく、divの内容を変更する必要があるパラメーターを渡すことでswapContent関数を呼び出すことができる必要があります。

私のエラーは、JS構文の無知に基づいていると思います。たとえば、私はこれを行いました：

    <script language="JavaScript" type="text/javascript">
<!--
function swapContent(thediv,cv) {
    $(thediv).html('<div align="center"><img src="images/loader.gif"/></div>').show();
    var url = "process.php";
    $.post(url, {contentVar: cv} ,function(data) {
       $(thediv).html(data).show();
    });
}
//-->
</script>

しかし、それが変数thedivをオブジェクトとして処理する必要があるのか​​、それとも何が問題になるのかはわかりません。

私はあなたが与えるかもしれないどんな助けにも感謝します！

<div id="div1" align="center"><a href="#" onClick="return false" onmousedown="javascript:swapContent('div1','do_stuff');"><img src='images/icon.png' border='0'></a></div>
...
<div id="div2" align="center"><a href="#" onClick="return false" onmousedown="javascript:swapContent('div2','do_stuff');"><img src='images/icon.png' border='0'></a></div>

Answer 1

divのIDを関数に渡しているので、代わりに$(thediv)-> $("#"+thediv)が機能します

Answer 2

ほとんどの作業はすでに完了しています :) 。オブジェクトを使用しthisます。http://jsbin.com/evirun/2/edit#source (正しい呼び出し div 要素を見つける方法を示す 1 つの例を作成します)

<div id="div1" align="center"><a href="#" onClick="return false" onmousedown="javascript:swapContent(this,'do_stuff');"><img src='images/icon.png' border='0'></a></div>

<div id="div2" align="center"><a href="#" onClick="return false" onmousedown="javascript:swapContent(this,'do_stuff');"><img src='images/icon.png' border='0'></a></div>

今あなたのスクリプト：

<script language="JavaScript" type="text/javascript">
<!--
function swapContent(obj,cv) {
    $(obj).parent().html('<div align="center"><img src="images/loader.gif"/></div>').show();
    var url = "process.php";
    $.post(url, {contentVar: cv} ,function(data) {
       $(obj).parent().html(data).show();
    });
}
//-->
</script>

thisメソッドを呼び出している DOM 要素を実際に渡します。次に、スクリプトでこの要素を使用しています。

編集

anchorタグが の中にあるのを見逃していdivました。使用するスクリプトを変更しましたparent。

Answer 3

onclickおよびonmousedownハンドラをインラインに配置しないでください。(html5)data-属性を使用して、現在cvパラメーターに入力している値を保存することをお勧めします。

<div id="div1" align="center"><a href="#" data-cv="do_stuff"><img src='images/icon.png' border='0'></a></div>
...
<div id="div2" align="center"><a href="#" data-cv="do_stuff"><img src='images/icon.png' border='0'></a></div>

...そして、次のような jQuery でクリックをバインドします。

$("a[data-cv]").click(function() {
   var thediv = $(this).parent(),
       cv = $(this).attr("data-cv");

   thediv.html('<div align="center"><img src="images/loader.gif"/></div>');

   var url = "process.php";
   $.post(url, {contentVar: cv} ,function(data) {
      thediv.html(data);
   });

   return false;
});

このコードはhas 属性セレクターを使用して、属性を持つすべてのアンカー要素を取得しdata-cv、クリック ハンドラーをそれらの要素にバインドします。ハンドラー内では、thisクリックされた特定のアンカーになるため、マークアップで指定された関連する div 要素は、実際にはアンカーの親であり$(this).parent()、適切な div への参照を取得するために使用できます (他の HTML 構造については、他の DOM トラバーサルを使用できます) .prev()、またはなどのメソッド.closest())。

クリック ハンドラのreturn false;最後にある は、デフォルトのアンカー クリック動作を停止します。

.show()また、現在表示されているコードでは、div が既に表示されているため、メソッドは必要ありません。

Answer 4

新しいdivなどを追加する前に、divのhtmlをクリアします:

$('#myDiv').html('');