ajax call only works first time - php

Question

I have a method in my controller that lets users check something called "POE Status".
This returns a string that i display in a div tag on my view. I also provide 2 buttons. one to enable POE and the other to disable. Both the enable and disable commands will return the POE status as a result.
So I'm trying to use ajax to update the page with the new status once either one of the two buttons are clicked.
What I'm noticing is that both buttons will work the first time the page is loaded. But after the initial ajax call is made and the view updated, if i try to use the buttons again, nothing happens.
I have the following HTML: (i'm not including all the html, just the parts that I think matter....)
<div class="span6" id="clientajaxcontainer">
<h2>Port POE Status: Port <?php echo $portname;?></h2>
<p><p>
<?php echo $poeStatus;?>
<button class="btn" id="enable">Enable POE</button>
<button class="btn" id="disable">Disable POE</button>
</div>
Then I have the following javascript:
<script>
//Enable POE button
$('#enable').click(function() {
alert('in POEOn');
console.log('On');
//disbled button until ajax request is done.
$(this).attr("disabled","disabled");
$('#disable').attr("disabled","disabled");
var htmlstring;
$.ajax({
url:"<?php echo site_url('controller/poeOn);?>",
type:'POST',
dataType:'text',
success: function(returnDataFromController) {
htmlstring = "<h2>Port POE Status: Port " + $('#port').val() + "</h2><p><p>" + returnDataFromController + "<button class='btn' name='enable' id='enable'>Enable POE</button> <button class='btn' name='disable' id='disable'>Disable POE</button>";
alert(htmlstring);
$('#clientajaxcontainer').html(htmlstring);
console.log(htmlstring);
}
});
//re-enable the buttons.
$(this).removeAttr("disabled");
$('#disable').removeAttr("disabled");
});
//Disable POE button
$('#disable').click(function() {
alert('in POEoff');
console.log('Off');
//disbled button until ajax request is done.
$(this).attr("disabled","disabled");
$('#enable').attr("disabled","disabled");
$.ajax({
url:"<?php echo site_url('controller/poeOff);?>",
type:'POST',
dataType:'text',
success: function(returnDataFromController) {
htmlstring = "<h2>Port POE Status: Port " + $('#port').val() + "</h2><p><p>" + returnDataFromController + "<button class='btn' name='enable' id='enable'>Enable POE</button> <button class='btn' name='disable' id='disable'>Disable POE</button>";
alert(htmlstring);
$('#clientajaxcontainer').html(htmlstring);
console.log(htmlstring);
}
});
//re-enable the buttons.
$(this).removeAttr("disabled");
$('#enable').removeAttr("disabled");
});
</script>
Can you tell me where I'm going wrong?
Thanks.

Answer 1

The problem is that you are not creating a "live" binding for your buttons and once you call $('#clientajaxcontainer').html(htmlstring); you replace the buttons with new elements which do not have a click binding. Try this instead:
$('#enable').live('click', function() {
//...
}
$('#disable').live('click', function() {
//...
}
If you're using jQuery 1.8 you can use the on() method instead of live(). That would look like this:
$(document).on('click', '#enable', function() {
//...
}
$(document).on('click', '#disable', function() {
//...
}
Here's the relevant documentation:
http://api.jquery.com/live/
http://api.jquery.com/on/