У меня проблема с функцией replaceWith()
.
Я создал календарь. Когда я выбираю день, у меня есть крест, который появляется вместо номера (для добавления события).
Если я нажму на другой день, номер первого выбранного дня снова отобразится, и крест появится на моем втором выборе.
Однако, если я попытаюсь щелкнуть снова по первому выбору, ничего не происходит (креста нет).
Вот ссылка на тест, это будет понятнее: http://www.fatal-destiny.com/calendrier/
$(document).ready(function() {
$('#calendrier td a').click(function(){
var nbReplace = $("span[class='replace']").length;
if(nbReplace > 0)
{
var nbEvenements = $("span[data-evenement='1']").length;
var jour = $("span[class='replace']").attr('data-valeur');
var dateComplete = $("span[class='replace']").attr('data-date');
if(nbEvenements > 0)
$("span[class='replace']").replaceWith('<a href="#" class="'+dateComplete+'" style="display: inline-block;width: 200px; height: 120px; line-height: 120px; color: #ce2d2d;">'+jour+'</a>');
else
$("span[class='replace']").replaceWith('<a href="#" class="'+dateComplete+'" style="display: inline-block;width: 200px; height: 120px; line-height: 120px;">'+jour+'</a>');
}
var elemH2 = $(this);
var elem = $(this).attr('class');
var res = elem.split("-");
$.get( "charger_nb.php", { date: elem }, function( data ) {
if(data == 0)
elemH2.replaceWith('<span class="replace" data-valeur="'+res[0]+'" data-date="'+elem+'"><a href="#" onClick="ajouterEvenement(\''+elem+'\'); return false;"><img src="images/ajouter.png" alt="Ajouter" title="Ajouter un événement" class="opacite" /></a></span>');
else
elemH2.replaceWith('<span class="replace" data-valeur="'+res[0]+'" data-date="'+elem+'" data-evenement="1"><a href="#" onClick="ajouterEvenement(\''+elem+'\'); return false;"><img src="images/ajouter.png" alt="Ajouter" title="Ajouter un événement" class="opacite" /></a> <a href="#" onClick="voirEvenement(\''+elem+'\'); return false;"><img src="images/voir.png" alt="Voir" title="Voir les événements" class="opacite" /></a></span>');
});
});
});
Идея?
Весь элемент привязки, на который вы нацеливаетесь в обработчике событий, заменяется диапазоном, затем он возвращается обратно, но теперь привязка динамически вставлена, и вам нужно делегировать событие
замещать
$('#calendrier td a').click(function(){
с
$('#calendrier').on('click', 'td a', function(){