Modifier l'action d'un bouton en jQuery

Version imprimable

Je veux modifié dynamiquement l'action d'un bouton:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 $("#action1").click(function(){ $('.bouton').attr('id', 'action2'); //action specifique à l'action1 }); $("#action2").click(function(){ $('.bouton').attr('id', 'action3'); //action specifique à l'action2 }); $("#action3").click(function(){ $('.bouton').attr('id', 'action1'); //action specifique à l'action3 });
Le bouton en question:

Code:

<input type="button" value="Valider" class="bouton" id="action1"/>

Je ne pence pas pouvoir utiliser de Toggle vu que j'ai plus de deux actions différentes sur le même bouton.

Le problème de ce code, c'est qu'a partir du deuxième bouton ca ne marche plus. Je pence que l'action2 n'est pas reconnu, n'existant pas dans le code d'origine...

Si vous avez une solution c'est avec plaisir.

Code:

<input class="myBtn" type="button" data-action="action1" value="Valider">

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$( "input.myBtn" ).on( "click", function(){
 
	switch( $( this ).data( "action" ) ){
		case "action1" : 
			$( this ).data( "action", "action2" )
 
			// code action 1
 
			// debug
			console.log( "cas1" );
			break;
		case "action2" : 
			$( this ).data( "action", "action3" )
 
			// code action 2
 
			// debug
			console.log( "cas2" );
			break;
		case "action3" : 
			$( this ).data( "action", "action1" )
 
			// code action 3
 
			// debug
			console.log( "cas3" );
			break;
		default :
			$.error( "Ce cas ne doit jamais se produire !" );
	}
});

Sachant que je suis sur Chrome, j'ai du faire quelques petites modifications sur le code jQuery pour que ca marche chez moi:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
$(".myBtn").click(function(){
	switch( $(this).data("action") ){
		case "action1" : 
			$(this).data("action", "action2");
                        // code action 1
			// debug
			console.log( "cas1" );
			break;
		case "action2" : 
			$(this).data("action", "action3");
	                // code action 2
	                // debug
			console.log( "cas2" );
			break;
		case "action3" : 
			$(this).data("action", "action1");
	                // code action 3
	                // debug
		        console.log( "cas3" );
			break;
		default :
			$.error( "Ce cas ne doit jamais se produire !" );
	}
});