ajax 调用只在第一次工作答案

【问题标题】：ajax call only works first timeajax 调用只在第一次工作
【发布时间】：2012-09-08 04:50:04
【问题描述】：

我的控制器中有一个方法可以让用户检查称为“POE 状态”的内容。这将返回一个字符串，我在视图的 div 标记中显示该字符串。我还提供了 2 个按钮。一个启用 POE，另一个禁用。 enable 和 disable 命令都将返回 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>&nbsp;
      <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>&nbsp;<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>&nbsp;<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>

你能告诉我哪里出错了吗？谢谢。

【问题讨论】：

标签： php ajax codeigniter

【解决方案1】：

问题在于您没有为按钮创建“实时”绑定，一旦您调用$('#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()  {
    //...
}

以下是相关文档：

【讨论】：

甜蜜！谢谢！那行得通。我想我必须等待几分钟才能接受答案。