我的控制器中有一个方法,可以让用户检查名为"POE状态"的东西。这将返回一个字符串,我在视图的div标记中显示该字符串。我还提供了2个按钮。一个用于启用POE,另一个用于禁用。因此,启用和禁用命令都将返回POE状态。因此,我尝试在单击两个按钮中的任何一个后,使用ajax将页面更新为新状态。
我注意到,第一次加载页面时,两个按钮都会工作。但是,在进行了最初的ajax调用并更新了视图之后,如果我再次尝试使用按钮,则不会发生任何事情。
我有以下HTML:(我不包括所有的HTML,只包括我认为重要的部分……)
<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>
然后我有以下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>
你能告诉我哪里错了吗?谢谢
问题是,您没有为按钮创建"活动"绑定,一旦调用$('#clientajaxcontainer').html(htmlstring);
,就会用没有点击绑定的新元素替换按钮。试试这个:
$('#enable').live('click', function() {
//...
}
$('#disable').live('click', function() {
//...
}
如果您使用的是jQuery 1.8,则可以使用on()
方法而不是live()
方法。看起来是这样的:
$(document).on('click', '#enable', function() {
//...
}
$(document).on('click', '#disable', function() {
//...
}
以下是相关文档:
- http://api.jquery.com/live/
- http://api.jquery.com/on/