1

次のように、特定の文字列 ( ) を検索し、それを別の文字列 ( ) に_aff.tractionsCode置き換えるこのコードがあります。tractionsId

content = document.body.innerHTML.replace(_aff.tractionsCode, tractionsId);
document.body.innerHTML = content;

次に例を示します。

_aff.tractionsCode{tractionsCode} と等しいと仮定します

<div class="affiliate" rel="{tractionsCode}">{tractionsCode}</div>

{tractionsCode} の両方のインスタンスを置き換える必要があります

ただし、問題は、これが発生すると、ロードされた html が置き換えられるため、他の JavaScript イベント ハンドラー (私がアクセスできる、またはアクセスできない可能性が最も高い) が適切に機能しなくなることです。

html (rel などの属性を含む) を調べて、すべての html を上書きせずに置換を実行する方法はありますか?

それとも完全に良い方法がありますか？

助けてくれてありがとう！

4

2 に答える 2

1

痛い！あなたがやろうとしていることは、多くの作業とノード (要素ではない) の繰り返しでおそらく可能です...しかし、なぜわざわざ? このような作業は、DOM のサブセクションに限定されたテンプレートと委任を利用するイベント ハンドラーを組み合わせることで、最も簡単になります。

JSRender (https://github.com/BorisMoore/jsrender) は、以前の jQuery テンプレート プラグイン (https://github.com/jquery/jquery-tmpl) の代替ですが、jquery-tmpl はまだ使用可能です (私は信じています)。パンドラはまだそれを使用しています）。JavaScript 以外のタイプを使用してテンプレートをスクリプト ブロックに格納し、そのコンテンツを簡単にプルしてレンダリングし、DOM の特定のサブセクションを置き換えることができます。

<script id="affiliateThing" type="text/x-jquery-tmpl">
<div class="affiliate" rel="${transactionsCode}">${transactionsCode}</div>
</script>
<script>
    jQuery("#affiliateThing").
        tmpl([{'transactionsCode': 'wee'}]).
        appendTo("#someElement");
</script>

このマークアップを置き換えてもイベント ハンドラーが壊れないようにするには、必ず親要素を介してイベントをデリゲートしてください。

jQuery("#someElement").on("click", ".affiliate", function(event){alert('wee');});

このステートメントは、イベント ハンドラを個々の「.affiliate」要素ではなく「#someElement」にバインドしますが、イベントが「.affiliate」要素から発生した場合にのみハンドラを起動します。

楽しみ！

編集: このテンプレート システムのバックエンド ライブラリはまったく重要ではありません。ただし、テクニックはそうです。範囲指定されたテンプレートと委任されたイベントを組み合わせれば、完璧です。

于 2012-05-17T06:13:19.507 に答える
0

を経由innerHTMLすると、bodyすべてが上書きされます。置き換える特定のテキストノードを検索する必要があります。

何かのようなもの..

document.getElementBy..('identifier').innerHTML

jQueryでは、

$('.className').text('text to insert');
于 2012-05-17T05:51:59.650 に答える