6

JQueryを介して多くの要素でjavascript変換を実行する私の通常の方法：

<div class="cow"></div>
<script> $(".cow").doStuff() </script>

ただし、この操作は脆弱で脆弱です。ページがすべて1回だけロードされることを前提として機能します。Ajaxと部分的なリロードを開始すると、この種のグローバル変換は完全に機能しなくなります。また、サーバーがサーバー側のデータに基づいて各要素に対して異なる変換を実行する場合も機能しません。

非要素の実際のonloadイベントbodyは機能しないことを私は知っています。1つの解決策は、すべての要素にID /クラスを指定し、JQueryを使用してそれらをすぐに参照することです。

<div id="cow"></div>
<script> $("#cow").doStuff() </script>

しかし、それは本当に厄介です。IDを指定するすべての要素がグローバルI名前空間を汚染するため、私はそれがまったく好きではありません。私は現在、要素に事実上衝突不可能なIDを与えています

<div id="id877gN0icYtxi"></div>
<script> $("#id877gN0icYtxi").doStuff() </script>

ランダムなbase64番号に基づいています。ただし、これはすべて巨大なハックのように見えます。要素onclicksやonmousedownsなどをそれぞれの属性を使用して非常に簡単に指定し、関数を呼び出して指定されたを変換することができthisます。

今、私はonloadうまくいかないことを知っています。ただし、その機能をシミュレートする方法はありますか？this具体的には、タグにIDを割り当てることなく、を使用して特定のタグを参照するJavaScriptコードを実行できるようにしたいと考えています。

編集：本質的に私は次のようなものが欲しい

<input onclick="alert('moo')"/>

ただし、oncreateの場合。input私の現在のユースケースは、またはtextareaをテキストで埋めることであり、現在、次のことを行っています。

<input id="id877gN0icYtxi"/>
<script>$("#id877gN0icYtxi").val(...)</script>

ここで、...は入力ボックスごとに異なるため、「グローバル」jquery変換を使用して簡単に実行することはできません。一方、作成時にのvalueor属性を設定することはできません。これは、である可能性があり、わかりません。私は次のようなことをしたい：inputtextarea

<input onload="$(this).val(...)"/>

これは機能しませんが、機能することを望みます。繰り返しますが、はサーバーによって設定され、ページ上のタグ...ごとに異なります。input

EDIT2：

私は、JQueryが通常、同じ方法で多くの要素に対してドキュメント全体の変換を行うために使用される時間をよく知っています。問題は、この場合、各要素が、サーバーによって指示された、その要素に固有の方法で変換されていることです。特定のユースケースでは、各フィールドの内容が事前に入力されて$().val()おり、当然、すべてのフィールドに異なる内容が入力されます。各要素に一意のIDを指定し、JQueryを使用してグローバル検索を実行してその要素を再度見つけることは、非常に回りくどい方法のように思えます。もちろん、ページの一部のAjaxingを開始すると中断します。

EDIT3：

要するに、私は書くことができるようになりたいです

<div onload="javascriptFunction(this)"/>

が作成さjavascriptFunction()れたときに実行さ<div>れ（最初のページにあるか、ajaxを介して挿入されているかに関係なく）<div>、パラメーターとして渡されます。divがクリックされたときにパラメーターとして実行するのと同じように、同じことをonclick実行しjavascriptFunction()たいのですが、が作成されたとき/DOMに挿入されたときです。<div><div>

<head>これを実現するために、で任意の量のセットアップスクリプトを受け入れるつもりです。上記の理由により、の後にタグを追加したり、またはに<script>タグを追加したりするつもりはありません。これらの制限を考えると、非ボディ要素の属性をシミュレートするために実行できる最善の方法は何ですか？<div>classid<div>onload

4

4 に答える 4

10

DOM 仕様にはそのようなイベントはありませんがonload、DOM レベル 2 仕様ではMutation イベント タイプが提供されており、attr やテキストの変更など、ドキュメントの構造に対する変更を通知できます。現在、このようなイベントをサポートしているのは最新のブラウザーのみであり、インターネットではバグがあります。エクスプローラー9！

DOMNodeInserted eventただし、ドキュメントの変更を監視するために使用できます。

$(document).live("DOMNodeInserted", function(e){
  $(e.target).val(...);
});

Mutation イベントの使用には注意が必要です。少なくとも更新されるようにしてください。W3Cによると：

ミューテーション イベント タイプは、ユーザー エージェント間で完全かつ相互運用可能にまだ実装されていません。ミューテーション イベントが解決するユース ケースに対処することを目的として、新しい仕様が開発中ですが、よりパフォーマンスの高い方法で行われます。

問題をグーグルで検索すると、クロスブラウザ/jqueryプラグインが見つかるかもしれません。念のため、これらのリンクが役立つ場合があります。

https://developer.mozilla.org/en/DOM/Mutation_events

http://help.dottoro.com/ljfvvdnm.php#additionalEvents

http://help.dottoro.com/ljmcxjla.php

http://help.dottoro.com/ljimhdto.php

http://www.bennadel.com/blog/1623-Ask-Ben-Detecting-When-DOM-Elements-Have-Been-Removed-With-jQuery.htm

于 2012-05-04T11:50:06.983 に答える
1

これはすべて、使用するタグの種類によって異なります。

知っておくべきことの 1 つは、jQuery を使用すると一度に多くの項目を選択できるため、 のような操作を行うと$('p')、そのオブジェクトがすべてのpノードを参照することです。

次のようなことをすると$('p').hide()、すべてのpノードが非表示になります。

jQuery セレクターは (少なくとも) CSS セレクターと同じくらい強力であるため、かなり意味のあることを 1 行で行うことができます。

コメント セクションなどの返信ボックスのリストのようなものがあると想像してください。

 -----------------------------------------
  Comment #1
   blah blah blah blah blah
    [ Text field  ] (Reply)
 -----------------------------------------
  Comment #2
   nyark nyark nyark nyark
    [ Text field  ] (Reply)
 -----------------------------------------
  Comment #3
   ubadabuba 
    [ Text field  ] (Reply)
 -----------------------------------------
  Comment #4
   eeeeeeeeeeeeeeeeeeeeeeeeee?
    [ Text field  ] (Reply)

したがって、DOM レイアウトは次のようになります。

<div class="comment" >
    <h1> Comment #1 </h1>
   <p> blah blah blah blah blah </p>
    <input  /> <button >Reply </button>
</div>
<div class="comment" >
    <h1> Comment #2 </h1>
   <p> nyark nyark nyark nyark </p>
    <input  /> <button >Reply </button>
</div>

したがって、すべての入力フィールドを更新してデフォルトのテキストを入力する場合は、フィールドの CSS セレクターが であることを確認するだけで済みます.comment > input。

その後、JSが単独で表示されます

$(document).ready(function(){
    var inputs=$('.comment > input ');//references all the input fields defined by this selector
    inputs.attr('value','default text');//set the value of the text in the input
})​

ここに示す例

于 2012-04-10T02:30:40.717 に答える
0

要素に ID を付与しても「グローバル名前空間が汚染される」わけではなく、要素を参照するためのメカニズムにすぎません。ID で参照する要素の ID のみが必要です。他の要素に ID を与えることは有害ではなく、不必要なだけです。

クラスや DOM 内での位置 (CSS セレクター プール内の任意のメソッド、および DOM 関係 (親、子、兄弟など) など) など、さまざまな基準によって要素を参照できます。選択した方法には、使用方法に応じて長所と短所がある場合があります。本質的に「良い」または「最良の」方法はありません。いくつかの方法が他の方法よりも適している場合があります。

たとえば、DOM の要素を置き換えた後にリスナーを置き換えたい場合は、要素を置き換えるためにそれを考慮する必要があります。イベント委任は 1 つの戦略であり、他にもあります。

于 2012-04-10T01:06:14.807 に答える
-1

どうwindow.onload()ですか？

于 2012-05-07T22:42:59.603 に答える