Wie kann die ID eines Elements aus dem jQuery-Ereignis 'on' wieder verwendet werden?

Question

Ich versuche, bestimmtes HTML basierend auf einem bestimmten Ereignis anzuzeigen. In diesem Fall ist es ein Knopfklick, der dann Text und eine oder mehrere Schaltflächenauswahlen anzeigt. Wenn eine Auswahl getroffen wird, werden der HTML-Text und die angezeigten Schaltflächen durch eine eingebettete switch-Anweisung in der click-Funktion bestimmt. Dieser Vorgang wird unter Verwendung des gleichen Schalterblocks und des "Ein" -Ereignisses wiederholt.

Das Problem, das ich renne ist, dass innerhalb der jQuery-Funktion, klicken Sie auf die neu präsentierte Schaltfläche (z. B. die Schaltfläche von Fall 0) nicht die Funktion ausgelöst, und Schalter wird nicht ausgelöst. Wenn ich einen Anhang anlege, kann ich auf die erste Schaltfläche (außerhalb der Funktion) klicken, und die Funktion wird kontinuierlich ausgelöst (erneut Fall 0), aber innerhalb der switch-Anweisung wird das Ereignis "on" nicht ausgelöst.

Jede Hilfe würde sehr geschätzt werden.

var stepNum = 0; 
$('#content').html('<h1>Start</h1><button id="sendButton">Go to case 0</button>'); 
$('#sendButton').on('click', function() { 
switch(stepNum) { 
    case 0: 
     $('#content').html('<h1>Switch case 0</h1><button id="sendButton">To case 2</button>'); 
       stepNum = 2; //Next click would go to case 2 
     $('#sendButton').off('click'); 
     refresh() 
     break; 
    case 1: 
     $('#content').html('<h1>Switch case 1</h1><button id="sendButton">To case 0</button>'); 
       stepNum = 0; //Next click would go to case 0 
     break; 
    case 2: 
     $('#content').html('<h1>Switch case 2</h1><button id="sendButton">To case 1</button>'); 
       stepNum = 1; //click would go to case 1 
     break;    
    default: 
     $('#content').append('<h1>Default!</h1>'); 
       stepNum = 4; 
     } 
return false; 
}); 

Here's a link to the JS Fiddle.

Answer 1

Das ist, weil die Ereignis-Listener auf die Elemente nur einmal hinzugefügt wird, die auf dem ersten gemacht bekommen.

Wenn Sie es auf jedes Element mit dieser ID auslösen wollen, versuchen

$('body').on('click', '#sendButton', function() {}) 

prüfen diese JSFiddle.

Answer 2

//You can bind the click event to the document passing the reference 
//in this case is "#sendButton" 

https://jsfiddle.net/06j440k4/1/