如何捕捉DOM元素的创建和使用jQuery进行操作 [英] How to catch creation of DOM elements and manipulate them with jQuery
问题描述
我需要这样的方式，因为我不会提前知道什么元素将被创建，因为他们将通过ajax像单一空的div或p的服务。
<！DOCTYPE html>
< html>
< head>
< title> on create< / title>
< script type =text / javascriptsrc =https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js>< ; /脚本>
< 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';
} //如果
var dataValue = $ div.attr（）;
$（
'< p class =fancyInput>'+
'< label'+ labelId +'for ='+ inputId +'>花式输入< / label>'+
'< input'+ inputId +'name ='+ inputId + value =一个花哨的输入/>'+
'< / p> '
）.appendTo（$ div）;
}）; // .each（）
}）; // jQuery（）
< / script>
< script type =text / javascript>
jQuery（$（$）{
var counter = 2;
var $ form = $（'＃form'）;
$（'＃add' ）.click（function（event）{
$（'< div class =fancyInputdata-input-id =fancyInput'+ counter +'>< / div>'）appendTo $ form）;
counter ++;
}）; // .click
}）; // jQuery（）
< / script>
< / head>
< body>
< a id =addhref =＃>添加另一个< / a>
< form id =formaction =＃>
< p class =normalInput>
< label id =normalInputLabelfor =normalInput>正常输入< / label>
< input id =normalInputname =normalInputvalue =普通输入/>
< / p>
< div class =fancyInput>< / div>
< / form>
< / body>
< / html>
更新：
我事先检查了liveQuery，我需要的功能，但是在执行事件回调时能够修改DOM元素。所以这不仅仅是我需要附加的事件，而是在元素创建时修改DOM的能力。例如：每当一个新的创建，它应该被填充（更好的如果被替换）与p，标签和输入标签
您可以使用DOM Level 3事件，例如 DOMNodeInserted 。这可能是：
$（document）.bind（'DOMNodeInserted'，function（event）{
/ /一个新节点被插入DOM
// event.target是对新插入的节点的引用
}）;
另外，您可以检出 .liveQuery help jQuery插件。
更新
在引用您的评论时，请查看 http://www.quirksmode.org/dom/events/index.html ，只有不支持它的浏览器是互联网浏览器这个世界（我猜IE9至少）。
我不能说太多的表现，但它应该执行得很好。 >
I'm trying to devise a method of when adding a simple div element with a class and some data-* in it, it will replace it or add into it some other elements. This method should not be called manually, but automatically by some kind of .live() jQuery method, a custom event or some kind like $('body').bind('create.custom'), etc. I need it this way since I wouldn't know in advance what elements will be created since they will be served through ajax like single empty div's or p's .
<!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>
Update: I checked liveQuery beforehand, it's that kind of functionality that I need, but with the ability to modify DOM elements while the event callback is executed. So it's not just that I need events attached, but the ability to modify the DOM upon element creation. For example: whenever a new is created, it should be filled in (even better if replaced) with the p, label and input tags
You could use a DOM Level 3 Event, like DOMNodeInserted. This could look like:
$(document).bind('DOMNodeInserted', function(event) {
// A new node was inserted into the DOM
// event.target is a reference to the newly inserted node
});
As an alternative, you might checkout the .liveQueryhelp jQuery plugin.
update
In referrence to your comment, have a look at http://www.quirksmode.org/dom/events/index.html, only browser which do not support it are the Internet Explorers of this this world (I guess IE9 does at least).
I can't say much about the performance, but it should perform fairly well.
这篇关于如何捕捉DOM元素的创建和使用jQuery进行操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
