CODEWITHSUNDEEP
javascriptjquery
Chaoxys
Chaoxys

Reputation: 163

Replacewith() Jquery

I have a problem with the function replaceWith().

I created a calendar. When I select a day I have cross that appears in place of the number (to add an event).

If I click on another day, the number of the first selected day is displayed again and the cross appears on my second choice.

However if I try to click again on the first choice, nothing happens (there is no cross).

Here is a link to test, it will be clearer : 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>');
    });
});
});

An idea?

Upvotes: 0

Views: 106

Answers (1)

adeneo
adeneo

Reputation: 318182

The entire anchor element that you target in the event handler is replaced with a span, then it's put back again, but now the anchor is dynamically inserted, and you'll need to delegate the event

replace

$('#calendrier td a').click(function(){

with

$('#calendrier').on('click', 'td a', function(){

Upvotes: 1

Related Questions