Ich versuche, eine Methode zu entwickeln, die beim Hinzufügen eines einfachen div-Elements mit einer Klasse und einigen data-* darin, es ersetzt oder in es einige andere Elemente hinzufügt. Diese Methode sollte nicht manuell aufgerufen werden, sondern automatisch durch eine Art von .live() jQuery-Methode, ein benutzerdefiniertes Ereignis oder eine Art wie $('body').bind('create.custom'), etc. Ich brauche es auf diese Weise, da ich nicht im Voraus wissen würde, welche Elemente erstellt werden, da sie durch Ajax wie einzelne leere div's oder p's serviert werden.
<!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>
Aktualisierung: Ich habe liveQuery vorher überprüft, es ist diese Art von Funktionalität, die ich brauche, aber mit der Fähigkeit, DOM-Elemente zu ändern, während der Ereignis-Callback ausgeführt wird. Es ist also nicht nur, dass ich Ereignisse angehängt, aber die Fähigkeit, das DOM bei der Erstellung von Elementen ändern müssen. Zum Beispiel: Wann immer ein neues Element erstellt wird, sollte es mit den Tags p, label und input ausgefüllt werden (noch besser, wenn es ersetzt wird)