Remplacement du bouton sur .click()?

Question

J'ai trois boutons que j'essaie d'échanger les uns avec les autres sur .click(): "play", "pause" et "resume". Le premier échange de boutons fonctionne à partir de #play -> #pause, mais après ce bouton #pause ne répond pas.

http://jsfiddle.net/YzVJN/

Toute aide serait appréciée!

$("#start").click(function() { 
    $("#start").replaceWith("<button id=\"pause\">Pause</button>"); 
}); 

$("#pause").click(function() { 
    $("#pause").replaceWith("<button id=\"resume\">Resume</button>"); 
}); 

$("#resume").click(function() { 
    $("#resume").replaceWith("<button id=\"pause\">Pause</button>"); 
});​ 

Answer 1

Je voudrais simplement modifier le texte et peut-être ajouter un attribut data- me dire plus sur l'état actuel , comme le texte, dans une version future pourrait être échanger avec une localisation.

<button class="btn-action" data-action="pause">Pause</button> 

puis

$(".btn-action").click(function() { 
    var currentAction = $(this).data("action"), 
     nextAction = ""; 

    switch (currentAction) 
    { 
     case "play": nextAction = "pause"; break; 
     case "pause": nextAction = "resume"; break; 
     case "resume": nextAction = "play"; break; 
    } 

    $(this).text(nextAction).data("action", nextAction); 
}); 

Lorsque vous avez un des paramètres de localisation, vous pouvez facilement échanger la text() pour quelque chose comme

$(this).text(actionLocalization[nextAction]) 

doute toujours votre propre code lorsque vous êtes se répéter ...

---

Voici un exemple simple: http://jsbin.com/ehonob/1/edit/

Answer 2

Vous pouvez utiliser on() avec la délégation de l'événement:

$("body").on("click", "#start", function() { 
    $(this).replaceWith("<button id=\"pause\">Pause</button>"); 
}).on("click", "#pause", function() { 
    $(this).replaceWith("<button id=\"resume\">Resume</button>"); 
}).on("click", "#resume", function() { 
    $(this).replaceWith("<button id=\"pause\">Pause</button>"); 
});​ 

Remarque, au lieu de body vous pouvez utiliser tout autre élément parent statique.

DEMO:http://jsfiddle.net/YzVJN/5/

Answer 3

Tout d'abord, vous ne voulez probablement pas de recréer des éléments DOM tout le temps. Ayez le tout dans le HTML en premier lieu, puis cachez et montrez ceux dont vous avez besoin.

http://jsfiddle.net/YzVJN/4/

$("#start").click(function() { 
    $("#start").hide(); 
    $("#pause").show(); 
}); 

$("#pause").click(function() { 
    $("#pause").hide(); 
    $("#resume").show(); 
}); 

$("#resume").click(function() { 
    $("#resume").hide(); 
    $("#pause").show(); 
});​ 

Si vous souhaitez recréer des éléments DOM, les éléments vont être nouveaux à chaque fois, donc la sélection $("resume") lors de la première exécution du script ne va pas retourner quoi que ce soit - dans ce cas, faites ce que les autres ont suggéré et utilisez quelque chose comme on('click', '#pause', ...).

Answer 4

Le problème est que vos éléments n'existent pas au moment de la configuration de la liaison.

Vous devez utiliser « en direct », « délégué » ou « sur » comme suit:

$(document).on("click", "#pause", function() { 
    $("#pause").replaceWith("<button id=\"resume\">Resume</button>"); 
}); 

Answer 5

si vous voulez vraiment supprimer et ajouter des éléments peuvent ensuite faire et les gestionnaires se réinscrire à chaque fois.

$("#start").click(function() { 
    $("#start").replaceWith("<button id=\"pause\">Pause</button>"); 
    $("#pause").click(function() { 
     replaceWithResume(); 
    }); 
}); 

function replaceWithResume(){ 
    $("#pause").replaceWith("<button id=\"resume\">Resume</button>"); 
    $("#resume").click(function() { replaceWithPause() }); 
} 

function replaceWithPause(){ 
    $("#resume").replaceWith("<button id=\"pause\">Pause</button>"); 
    $("#pause").click(function() { replaceWithResume() }); 
} 
​