1

ヘッダーと空の本文を持つテーブルがあります。

<table style="width:50%;" class="adminlist">
<thead>
<tr>
<th style="width:80%;">Number</th>
<th style="width:20%;">Quantity</th>
<th style="width:20%;"></th>
</tr>
</thead>
<tbody id="body_orderproducts">
<tr style="background-color: rgb(170, 170, 170);">                      <td class="kmx_nodata" colspan="3">NO DATA.</td>
</tr>
</tbody>
</table>

ここで、データをロードし、tbody に ajax 関数を入力します。

var baseurl = '<?php echo HtmlHelper::getComponentPath(true); ?>';
var urlquery_ajax = '<?php echo RouteHelper::urlQueryWithRawAndToken('order&task=');?>';
var order_id = <?php echo $this->item->id;?>;
var kmx = jQuery.noConflict();
kmx().ready(function() {
/**
* Ajax call to load the products linked to the order
*/
function loadTableProducts() {
    var myProductTableBody = kmx('#body_orderproducts');
    myProductTableBody.empty();
    kmx.ajax({
        type: "POST",
        url: baseurl,
        cache: false,
        data: urlquery_ajax + "getOrderProductsInJsonFormatAjax&order_id=" + order_id,
        success: function(data){
                    data = kmx.parseJSON(data);
                    var myProductTableBody = kmx('#body_orderproducts');
                    populateTable(myProductTableBody, data);
                 },
         failure: function(msg){
                    msg = kmx.trim(msg);
                    alert('Error: ' + msg.responseText);
                  }
    });
}
/**
* Populate the table
*/
function populateTable(myTBodyObj, myData) {
    if (myData.rows.length > 1) {
        kmx.each(myData.rows, function(index,item) {
            myTBodyObj.append('<tr><td>' + item.number + '</td><td align="right">' + item.quantity + '</td><td><img id="delete_product_' + item.id + '" name="delete_product_' + item.id + '" class="kmx_image_delete" alt="<?php echo JText::_( 'Delete this product'); ?>" src="components/com_cmpningbo/assets/images/delete.png" /></td></tr>');
        });
    }
    else {
        myTBodyObj.append('<tr><td colspan="2" class="kmx_nodata"><?php echo JText::_( 'NO DATA.'); ?></td></tr>');
    }
    return;
}}
loadTableProducts();
});

すべて正常に動作し、結果は次のようになります。 テーブル本体が正常にロードされました

ここで、画像の「削除」をクリックしたときにイベントを処理するコードを追加します。

kmx('img[name^="delete_product_"]').live('click', function() {
        alert('click');
        return false;
    });

各「削除」画像には、delete_product_XX のような ID と名前があります。ここで、XX は削除するレコードの ID です。そのコードは、テーブル本体が ajax で読み込まれると機能しませんが、ページの読み込み時にテーブル本体が読み込まれると機能します (ajax なし)。この問題についてはすでに確認しましたが、画像についてはライブに問題があるようです? それを解決する方法がわかりませんか？何か案が？

4

3 に答える 3

2

すでにすべての削除ボタンに共通のクラスがあるため、次のようなデリゲート イベント ハンドラーを作成して、1 つのイベント ハンドラーですべてを処理できます。

kmx("#body_orderproducts").on('click', '.kmx_image_delete', function() {
    // you can examine the other cells in this row to get the desired ID
    // or you can parse it off the end of the image id
    var deleteID = this.id.replace("delete_product_", "");
    // now do whatever you want to do to process the deleteID
});

動的に作成されたオブジェクトに対して委任されたイベント処理を機能させるには、最初のセレクターを動的に作成されない静的な親オブジェクト (イベント ハンドラーをインストールするコードを実行するときに存在するオブジェクト) に設定し、2 番目のセレクターを次のように設定します。動的作成オブジェクトに一致するもの。

参考までに.live()、jQuery のすべてのバージョンで廃止されました。jQuery 1.7+ の場合、.on()推奨されます。1.7 より前の jQuery の場合.delegate()は、推奨されます。これは、 と の両方.delegate()が.on()よりもはるかに効率的であるため.live()です。

1.7 より前のバージョンの jQuery では、次のようになります。

kmx("#body_orderproducts").delegate('.kmx_image_delete', 'click', function() {
    // you can examine the other cells in this row to get the desired ID
    // or you can parse it off the end of the image id
    var deleteID = this.id.replace("delete_product_", "");
    // now do whatever you want to do to process the deleteID
});
于 2012-04-10T03:35:12.267 に答える
0

わかりました、jfriend00 によって言及された方法は正常に動作します:

$kmx("#body_orderproducts").delegate('.kmx_image_delete', 'click', function() {
        var order_product_id = kmx(this).attr('id');
        order_product_id = order_product_id.replace('delete_order_product_', '');
        deleteProduct(order_product_id);
    });

しかし、アプリケーションの別の部分で live メソッドが機能する理由がわかりません。

$('[class^="' + messageid_prefix + '"]').live('click', function() {
 var className = kmx(this).attr('className');
 var id = className.replace(messageid_prefix, '');
 [...]
});

JQuery1.4

于 2012-04-12T06:48:53.713 に答える
0

単一のクラス セレクターを使用してすべての削除イメージをバインドすると、「this」キーワードを使用して DOM ツリーを最上位のtr行要素に登り、下に掘り下げて目的のアイテムを取得できます。削除操作。

kmx('img.kmx_image_delete').live('click', function() {
    alert('click');
    alert("deleting row with id = " + kmx(this).parent().parent().find("td:first").html());
    return false;
});

ライブ関数は、その CSS クラス セレクターに一致する DOM に追加されたすべての新しい行を探すだけでよいため、これは実行もはるかに簡単です。

このコードを使用して、リストの 2 番目の削除イメージをクリックすると、2 つのアラートが表示されます。

click

12

最後に、jQuery live のドキュメントでは、live が非推奨であることを明確にしています。これは "on" メソッドに取って代わられました:

jQuery 1.7 以降、.live() メソッドは非推奨になりました。.on() を使用して、イベント ハンドラーをアタッチします。古いバージョンの jQuery のユーザーは、.live() よりも .delegate() を使用する必要があります。

ハンドラーの使用に関する jQueryは、ライブと非常によく似ています。

kmx('img.kmx_image_delete').on('click', function() {
    alert('click');
    alert("deleting row with id = " + kmx(this).parent().parent().find("td:first").html());
    return false;
});

ライブがイベントを削除イメージに添付できないという問題が引き続き発生する場合は、最新バージョンの jQuery にアップグレードし、「on」を使用してみることを強くお勧めします。

于 2012-04-10T03:37:52.977 に答える