0

私は自分のウェブサイトにPHP、jQueryを使用しています。ページの読み込み時にページに存在する HTML 要素をフォローしました。

//Date picker controls
<input class="form-control date_control" placeholder="yyyy-mm-dd" type="date" name="rebate_start_date[1]" id="rebate_start_date_1" value="">
<input class="form-control date_control" placeholder="yyyy-mm-dd" type="date" name="rebate_expiry_date[1]" id="rebate_expiry_date_1" value="">
//Select control
<select class="states" multiple="multiple" name="applicable_states[1]" id="applicable_states_1">
  <option value="1">Alabama</option>
  <option value="2">Alaska</option>
  <option value="3">Arizona</option>
  <option value="4">Arkansas</option>
  <option value="5">California</option>
</select>

上記のコードでは、HTML コントロールに jQuery クラスを追加して、jQuery 機能を実行できるようにしています。

  1. 2 つの日付ピッカー コントロールの .date_control
  2. 選択コントロールの .states

上記の指定されたクラスを持つ上記の HTML 要素の jQuery コードは次のとおりです。

$(document).ready(function() {
  //code for datepicker
  $(".date_control").datepicker({
    dateFormat: "yy-mm-dd"
  });
  //code for states
  $('.states').multiselect({
    includeSelectAllOption: true,
    maxHeight: 150
  });
});

ページにあるボタンをクリックすると、次のように AJAX 関数を呼び出します。

<button style="float:right" class="add_new_rebate" type="button" class="btn btn-default" onclick="add_rebate_by_product(); return false;"><i class="icon-plus"></i> &nbsp;Add New Rebate</button>

次に、AJAX 関数で PHP ファイルを呼び出します。PHP ファイルでは、応答を作成し、それを AJAX 要求に送り返しています。ここまではすべて正常に動作します。しかし、私が直面している問題は、AJAX response を介して追加した HTML コントロールで jQuery 機能が動作しないことです。PHP 応答の準備中に、上記と同じクラスを追加することに注意しました。それぞれの HTML 要素を調べてソース HTML を確認しても、jQuery クラスはそこに存在しますが、機能はまだ機能していません。参考までに、AJAX 要求コードと PHP ファイルからの応答準備コードを以下に示します。

//AJAX request code
function add_rebate_by_product() { 
    var manufacturer_id =  $("#company_id").val();

    var next_rebate_no = $('.rebate_block').length + 1;
    var rebate_no      = $('.rebate_block').length + 1;

    if ($('.rebate_block').length>0) { 
      rebate_no = rebate_no+1;
    }

      $('.add_new_rebate').attr('disabled','disabled');


    $.ajax({
      type: "POST",
      url: "add_rebate_by_product.php",
      data: {'request_type':'ajax', 'op':'create_rebate', 'next_rebate_no':next_rebate_no, 'rebate_no':rebate_no, 'manufacturer_id':manufacturer_id},  
      beforeSend: function() { 
        $('.table-responsive').after("<img src='http://localhost/smart-rebate-web/web/img/ajax-loader.gif' class='load' alt='Loading...'>");
      },
      success: function(data) {
        if(jQuery.trim(data)=="session_time_out") {
        window.location.href = site_url+'admin/login.php?timeout=1';                
        } else {
          $('.rebate_block').append(data);
          $('.add_new_rebate').removeAttr('disabled');
        }
        $('.load').remove();
      }
    });
}


//PHP code snippet to prepare response
    <?php
    $op = $_REQUEST['op'];
    switch( $op ) {
     case "create_rebate": 
    echo "<input class='form-control date_control' placeholder='yyyy-mm-dd' type='date' name='rebate_start_date[$rebate_no]' id='rebate_start_date_$rebate_no' value=''><input class='form-control date_control' placeholder='yyyy-mm-dd' type='date' name='rebate_expiry_date[$rebate_no]' id='rebate_expiry_date_$rebate_no' value=''>
    <select class='states' multiple='multiple' name='applicable_states[$reabate_no]' id='applicable_states_$reabate_no'>
      <option value='1'>Alabama</option>
      <option value='2'>Alaska</option>
      <option value='3'>Arizona</option>
      <option value='4'>Arkansas</option>
      <option value='5'>California</option>    
    </select>";
    exit;
    }
    ?>

私はこれについて多くのことをグーグルで調べましたが、AJAX を使用して追加された HTML コントロールに対して jQuery 機能を実行可能にする完璧なソリューションをまだ得ることができませんでした。それで、誰かがこの点で私を助けてくれますか？私の問題を理解するために貴重なお時間を割いていただき、ありがとうございます。質問に関する情報が必要な場合は、同じ情報を提供できます。どんな種類のヘルプ、コメント、提案、回答も高く評価されます。貴重なご回答をお待ちしております。

4

1 に答える 1

1

関数で初期化コードをラップします。

function initializeControls(){
  //code for datepicker
  $(".date_control").datepicker({
    dateFormat: "yy-mm-dd"
  });
  //code for states
  $('.states').multiselect({
    includeSelectAllOption: true,
    maxHeight: 150
  });
}

次に、ajax コールバックで呼び出します。

success: function(data) {
    if(jQuery.trim(data)=="session_time_out") {
    window.location.href = site_url+'admin/login.php?timeout=1';                
    } else {
      $('.rebate_block').append(data);
      $('.add_new_rebate').removeAttr('disabled');
      initializeControls();
    }
    $('.load').remove();
 }
于 2014-05-04T16:22:54.293 に答える