jQuery: éléments clones ET événements
Chaque fois que j'utilise ajax pour créer dynamiquement de nouveaux contenus, de nouvelles .clone(), append (), etc, le nouvel élément perd tous les déclencheurs et les événements, j'ai programmé =(
Après avoir fait la copie, des choses simples qui fonctionnent sur d'autres éléments comme l'ajout d'une classe , sur les éléments copiés ne fonctionnent plus. Tout nouveau contenu ajax ne fonctionne pas. Les boutons de commande ne fonctionnent plus. Que puis-je faire?
Je suis le clonage de ce code HTML, et les boutons de commande ne fonctionnent plus. Style de la portée des éléments qui ne fonctionnent plus sur les éléments CLONÉS:
<div name="shows" id="x"><br/> <!-- The ID depends on the database-->
<div name="shows" id="x">
ID: <input disabled="disabled" size="7" value="x" name="id" />
Status:
<select name="status" >
<option selected="selected" >Display</option>
<option >Hide</option>
</select>
<br/><br/>
<span class="required" id="date_txt">*Date: </span><input type="text" value="" name="date" />
<span class="required" id="title_txt">*Title: </span><input type="text" size="65" value="" name="title" />
<br/>
<span class="required" id="venue_txt">*Venue: </span><input type="text" size="45" value="" name="venue" />
Telephone: <input type="text" value="" name="tel" />
<br/>
URL: <input type="text" size="100" value="" name="url" />
<br/><br/>
Address: <input type="text" size="45" value="" name="address" />
<span class="required" id="city_txt">*City: </span><input type="text" value="" name="city" />
<br/>
State: <input type="text" value="" name="state" />
ZIP: <input type="text" value="" name="zip" />
<span id="country_txt">*Country: </span><input type="text" value="United States" name="country" />
<br/>
<br/>Comments: <br/>
<textarea cols="80" rows="8" name="comments" ></textarea>
</div>
<!-- START OF:commands -->
<div id="commands" >
<button name="edit" id="edit" >Edit</button>
<button name="delete" id="delete" >Delete</button>
<br />
<hr />
<br />
</div>
<!-- END OF:commands -->
</div>
<!-- END OF:new -->
Nouveaux commentaires ajoutés, 11/03/2011:
OK, j'ai compris le problème et j'ai eu une erreur sur mon jQuery. Maintenant, quand je ajouter .clone( vrai ) PRESQUE tout fonctionne.
Mon nouveau problème est l'UI datepicker.
Après le clonage de l'HTML, quand je clique sur les nouveaux clones du champ date, la priorité va à la (vieille) datefield les données ont été clonés à partir de. De plus, si je sélectionne une date, la valeur va de la vieille datefield -Pas récemment cloné datefield.
Voici mon code ajax (Après un succès submition):
UI datepicker code:
$("input[name='date']").datepicker({ dateFormat: 'yy-mm-dd', changeMonth: true, changeYear: true, numberOfMonths: 3, showButtonPanel: true});
Ajax:
...ajax code...
function(data)
{
var $msg = eval(data);
if( $msg[0] == 1 )
{
//#var.new
$id = '#'+$msg[1];
$data = $("#new");
$new = $data.clone(true);
$new.find('input.datefield').datepicker();
$new.attr("id", $id);
$new.children('[name="id"]').val($id);
$new.children('[name="id"]').attr("value", $id);
$new.children(":input").each(function() { var $value = $(this).val(); $(this).attr("value", $value); });
$new.prepend( "<br/>" );
$commands = $("#blank").children("#commands").clone(true);
$commands.children("#add").text("Update");
$commands.children("#add").attr("pk", $id);
$commands.children("#add").attr("name", "update");
$commands.children("#add").attr("id", "update");
$commands.children("#reset").text("Delete");
$commands.children("#reset").attr("pk", $id);
$commands.children("#reset").attr("name", "delete");
$commands.children("#reset").attr("id", "delete");
$new.append( $commands );
//#animation
//blank.slideUp
$("#blank").slideUp(2500, function(){
$("#ADDNEW").html("► New:");
//$("#blank").clone().prependTo( $("#active") );
//$("#blank").prependTo( "#active" );
//active.slideUp
$("#active").slideUp("slow", function(){
$("#ON").html("► Active:");
$("#active").prepend( $new );
$('#reset').trigger('click');
//active.slideDown
$("#active").slideDown(8500, function(){
$("#ON").html("▼ Active:");
//blank.slideDown
$("#blank").slideDown(3500, function(){
$("#ADDNEW").html("▼ New:");
load_bar(0);
}); //end: anumation.#blank.slideDown
}); //end: anumation.#active.slideDown
}); //end: anumation.#blank.slideUp
}); //end: anumation.#active.slideUp
//$("#new").fadeOut(2000, function(){
//START: blank
//alert( $("#blank").html() );
//$dad = $("#new");
//$dad.children('input[name!="id"][name!="country"], textarea').val('');
//$dad.children('[name="country"]').val("United States");
//$dad.children('[name="date"]').focus();
//END: blank
//$("#new").fadeIn(2000, function(){
//alert( $msg );
//}); //end: anumation.fadeIn
//}); //end: anumation.fadeOut
} //end: if
else
{
//var varMSG = data;
//alert( "Hello" );
alert( $msg );
//$("#add").attr("disabled", false);
//$("#reset").attr("disabled", false);
load_bar(0);
} //end: if.else
}//end: $.post.function
); //END:$.post
});
//END:ajax
source d'informationauteur Omar
Vous devez vous connecter pour publier un commentaire.
.clone( true )
fait le tour.Documentation: http://api.jquery.com/clone/
Salut, je vais avoir un peu similaire de cas d'utilisation, j'ai peu de contenu généré dynamiquement qui contient un bouton, cliquez sur l'événement est de répondre au bouton d'origine mais pas le générés,
Je l'ai fait avant :
mais j'ai résolu mon problème en remplaçant le sur par live comme ceci :
Si vos gestionnaires sont le programme d'installation en utilisant quelque chose comme
$('.de la classe).cliquez sur( ... )
Essayer quelque chose comme ceci à la place:
$('.de la classe).live('click', ...)
Vivre s'applique à des éléments avec la classe qui n'existent pas encore.
J'ai finalement obtenu l'UI datepicker pour fonctionner correctement. J'ai dû supprimer complètement datepicker AVANT le clonage et l'ajouter APRÈS le clonage d'éléments. Les gars de l'INTERFACE utilisateur devrait rendre plus facile pour nous. Allez comprendre!
Juste avant le clonage:
Après clonage: