0

動的UIを備えたドキュメントがあります。ユーザーは、必要に応じて既存のデータ入力フォームに行を追加して、より多くの情報を提供できます。

単純な配列を使用して画面上のアイテムを追跡し、保存を求めるプロンプトを表示していますが、新しいアイテムのIDを配列に追加する方法がわかりません。既存のアイテムに対して機能するロジックは次のとおりです。

$(document).ready(function () {
   $('.monitor').each(function () {
        monitorIds.push($(this).attr('id'));
        monitorValues.push($(this).val());
    });
});

私はこれらの線に沿って何かをできることを望んでいましたが、それを行うための適切な方法を見つけることができません:(「ライブ」メソッドはイベントで定義されていないため、これが機能しないことを認識しています）。

$('.monitor').live(function () {
    monitorIds.push($(this).attr('id'));
    monitorValues.push($(this).val());
});

私はLiveQueryプラグインを見てきましたが、私はすでにプラグインの地獄に深く関わっているので、さらに別のプラグインを追加することを避けたいと思っていました。もっと良い方法はありますか？

編集：私は1つのポイントについて明確ではありませんでした-これを別のスクリプトに保持し、要素を追加する可能性のある各スクリプトを更新して要素を追加する関数を呼び出すのではなく、動的に実行しようとしています監視アレイに。UI作業を行うためのスクリプトを作成した後でも、これを実装するためにチームの作業を最小限に抑えようとしているだけです。

4

2 に答える 2

1

ライブコレクションであるためNodeList、次のような要素の追加/削除を聞くことができます。

(function(){
var a = document.getElementsByTagName("*"), elmCount = a.length;

    window.setInterval( 
        function(){
        var curCount = a.length;

            if(curCount !== elmCount ) {
            jQuery( document ).trigger( "DOMChange" );
            elmCount = curCount;
            }
        },
    200 );


})();

jQuery( document ).bind( "DOMChange",
    function(e){
    console.log("domchange");
    }
);

欠点は、要素数を変更せずにDOMを変更すると、トリガーされないことです。このページのグーグルクローム14でテストされました。

また、新しいjQueryオブジェクトを作成する代わりに、これを行う方が少し効率的です。

$('.monitor').each(function () {
        monitorIds.push( this.id );
        monitorValues.push this.value );
    });
于 2011-10-17T17:13:37.670 に答える
0

getMonitorDataという関数を作成し、必要に応じて呼び出すのはなぜですか。

function getMonitorData() {
  var monitorData = { monitorIds: [], monitorValues: [] };

  $('.monitor').each(function () {
        monitorData.monitorIds.push($(this).attr('id'));
        monitorData.monitorValues.push($(this).val());
  });
  return monitorData;
}

すべての[新規追加]ボタンに追加する場合

var globalMonitorData;

$(document).ready(function () {
  $(".myAddNewButton").click(function () {

    // add your new stuff to the DOM HERE

    globalMonitorData = getMonitorData();
  });
});

ただし、getMonitorData（）をクリックハンドラーから分離することで、フォームの送信時やその他の操作時にも使用できます。

于 2011-10-17T16:46:28.517 に答える