如何捕捉DOM元素的創建並使用jQuery來操作它們

我想要設計一種方法，在添加一個簡單的div元素時添加一個類和一些數據 - *，它將替換它或者添加到其中其他元素。這個方法不應該手動調用，而是自動地通過某種.live（）jQuery方法，自定義事件或類似$（'body'）。bind（'create.custom'）等等。我需要它這種方式，因爲我不會提前知道什麼元素將被創建，因爲他們將通過像單個空div或p的ajax服務。如何捕捉DOM元素的創建並使用jQuery來操作它們

<!DOCTYPE html> 
<html> 
    <head> 

     <title >on create</title> 

     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script> 

     <script type="text/javascript" > 

      jQuery(function($){ 
       $("div.fancyInput").each(function(index,element){ 

        var $div = $(this); 
        var dataId = $div.attr("data-input-id"); 
        var inputId = ''; 
        var labelId = ''; 
        if(!!dataId){ 
         inputId = 'id="' + dataId + '"'; 
         labelId = 'id="' + dataId + 'Label"'; 
        } // if 

        var dataValue = $div.attr(); 

        $(
         '<p class="fancyInput" >' + 
         ' <label ' + labelId + ' for="' + inputId + '" >A fancy input</label>' + 
         ' <input ' + inputId + ' name="' + inputId + '" value="A fancy input" />' + 
         '</p>' 
        ).appendTo($div);    
       }); // .each() 
      }); // jQuery() 
     </script> 

     <script type="text/javascript" > 

      jQuery(function($){ 
       var counter = 2; 
       var $form = $('#form'); 
       $('#add').click(function(event){ 
        $('<div class="fancyInput" data-input-id="fancyInput' + counter + '" ></div>').appendTo($form); 
        counter++; 
       }); // .click 
      }); // jQuery() 

     </script> 
    </head> 
    <body> 

     <a id="add" href="#" > add another one </a> 
     <form id="form" action="#" > 

      <p class="normalInput" > 
       <label id="normalInputLabel" for="normalInput" >A normal input</label> 
       <input id="normalInput" name="normalInput" value="A normal input" /> 
      </p> 

      <div class="fancyInput" ></div> 

     </form> 
    </body> 
</html>

更新： 我檢查的liveQuery事前，它是一種功能，我需要的，但在執行的事件回調修改DOM元素的能力。因此，我不僅需要附加事件，還需要在創建元素時修改DOM。例如：每創建一個新的應用程序，它都應該被p，標籤和輸入標籤填充（甚至更好）

來源

2011-02-06 Azder

您可以使用DOM級別3事件，如DOMNodeInserted。這可能是這樣的：

$(document).bind('DOMNodeInserted', function(event) { 
    // A new node was inserted into the DOM 
    // event.target is a reference to the newly inserted node 
});

作爲替代方案，您可能檢出.liveQuery^help jQuery插件。

更新

在referrence您的意見，看看http://www.quirksmode.org/dom/events/index.html，只是不支持它是這個這個世界的互聯網瀏覽器的探險家（我猜IE9至少一樣）。

我不能說太多的表現，但它應該表現得相當好。

來源

2011-02-06 19:01:21 jAndy

我在某處讀到它很慢，可能在所有瀏覽器上都不支持。 – Azder 2011-02-06 19:04:32

如何捕捉DOM元素的創建並使用jQuery來操作它們

回答

相關問題