Ahem, voici une version légerement modifié, qui fonctionne correctement pour moi :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Newsletter</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href="style_backoff.css"/>
<link rel="stylesheet" type="text/css" href="newsletter.css"/>
<script type="text/javascript" src="checking.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".supprimerArticle").hide();
$(".ajoutArticle").click(function (){
var form = $(this).closest('form');
var articleList = form.find('.article');
// Le nombre d'articles déjà présents
var n = articleList.length;
// Le premier article que l'on va cloner
var firstArticle = $(articleList[0]);
// Le dernier article de la liste
var lastArticle = $(articleList[n-1]);
// Un article cloné
var clonedArticle = firstArticle.clone();
// Pour chaque input clonés
clonedArticle.find(':input').each(function() {
// On vide la valeur
$(this)
.filter(':text,:file').val('').end()
.filter(':radio').attr('checked', false);
// On change le nom en ajoutant le numero
$(this).attr('name', $(this).attr('name')+n)
})
// On l'ajoute au dom après les autres
clonedArticle.insertAfter(lastArticle).hide().fadeIn('slow');
// On ajoute le le lien de suppression
$(".supprimerArticle").fadeIn("fast");
});
$(".supprimerArticle").click(function (){
var article = $(".article:last");
article.remove();
// S'il y a moins de 2 articles (autrement dit un seul) on cache le bouton supprimer.
if ( $(".article").length < 2 ) { $(".supprimerArticle").fadeOut("fast"); }
});
});
</script>
</head>
<body>
<div id="header"><a class="deco" href="#"><img src="img/deco.png" border="0" /></a>
<ul id="menu">
<li id="nav_projets" class="inactive"><a href="administration_clients.html">CLIENTS</a></li>
<li id="nav_actualites" class="inactive"><a href="admin_actu.html">ACTUALITÉS</a></li>
<li id="nav_news" class="active">NEWSLETTER</li>
</ul>
</div>
<div id="contenu">
<div id="contenu2">
<h1>Nouvelle Newsletter</h1>
<h6 style="margin-top:-20px"><a href="#">Nouvelle Newsletter</a> | <a href="contact.html">Liste des contacts</a></h6>
<div id="top_actu_list">
<form method="get" action="#">
<div class="langue">
<img src="img/fr.gif" />
<input type="radio" value="francais" name="langue"/>
<img src="img/gb.gif" />
<input type="radio" value="anglais" name="langue" />
</div>
<label>Titre</label><br />
<input type="text" name="titre" class="titre"/><br />
<div id="chapeau">
<label>Titre chapeau</label><br />
<input type="text" name="titre_chapeau" class="titre" /><br />
<label>Texte chapeau</label><br />
<textarea name="texte_chapeau" class="texte"></textarea><br /><br />
</div>
<div class="article">
<label>Titre article</label><br />
<input type="text" name="titre_article" class="titre"/><br /><br />
<label>Texte article</label><br />
<textarea name="texte_article" class="texte"></textarea><br />
<label>Texte à gauche</label>
<input type="radio" value="gauche" name="alignement_article" class="alignement"/>
<label>Texte à droite</label>
<input type="radio" value="droite" name="alignement_article" class="alignement"/><br /><br />
<input type="file" name="image_article" value="" /><br /><br />
<label>Ajouter un lien</label>
<input type="text" name="url_article" class="url"/>
</div>
<div id="ajoutSupprimerArticle">
<a href="javascript:;" title="Ajouter un article" class="ajoutArticle" rel="article"><img src="img/admin_projets/btn_ajouter_un_article.png" /></a>
<a href="javascript:;" title="Supprimer un article" class="supprimerArticle" rel="article"><img src="img/admin_projets/btn_supprimer_un_article.png" /></a>
</div>
<div id="enregistrerNewsletter">
<a href="javascript:;" title="Prévisualiser" class="previewArticle" rel="article"><img src="img/admin_projets/btn_previsualiser.png" /></a>
<input type="image" name="submit" value="" src="img/admin_projets/btn_enregistrer.png" />
</form>
</div>
</div>
</body>
</html>
- J'ai mis sous forme de variables les éléments jQuery pour rendre cela plus lisible et simplifier les selections.
- Ca simplifie certaines selection pour etre moins dépendante du code html
- J'ajoute l'élément cloné au DOM après avoir fait mes opérations dessus (vider les value et changer les name) pour éviter des redraws inutiles.
- J'ai aussi ajouté des names aux input de l'article original qui n'en avaient pas (?!)
A vue de nez, si je me souviens du problème original, c'était que tu continuait de faire des modifications sur ta variable 'article' qui avait servi de base au clonage, et non pas sur le nouvel article cloné
Modifié par Tymlis (20 Jul 2009 - 21:00)
:
.