1

ユーザーが「POEステータス」と呼ばれるものを確認できるようにするメソッドがコントローラーにあります。これは、ビューの div タグに表示する文字列を返します。ボタンも2つ付けます。1 つは POE を有効にし、もう 1 つは無効にします。enable コマンドと disable コマンドの両方が結果として POE ステータスを返します。そのため、2 つのボタンのいずれかがクリックされると、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>

どこが間違っているのか教えてもらえますか? ありがとう。

4

1 に答える 1

4

問題は、ボタンの「ライブ」バインディングを作成しておらず、呼び出し$('#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()  {
    //...
}

関連するドキュメントは次のとおりです。

于 2012-09-07T20:50:04.143 に答える