dongliang1865 2014-05-04 15:27
浏览 63
已采纳

如何将jQuery类应用于通过AJAX响应生成的HTML元素,以便jQuery功能应该可行?

I'm using PHP, jQuery for my website. I've following HTML elements which are present on the page when the page loads.

//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>

In the above code, I've added jQuery classes to the HTML controls to make the jQuery functionality workable.

  1. .date_control for two date picker controls
  2. .states for select control

The jQuery code for above HTML elements with the above specified classes is as follows:

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

Now on click of a button present on a page I'm calling AJAX function as follows.

<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>

Then in AJAX function I'm giving call to a PHP file. In PHP file I'm making the response and sending it back to the AJAX request. Till here everything works fine. But the issue I'm facing is the non-working of jQuery functionality on the HTML controls I added through AJAX response. I've taken care of adding the same classes as above while preparing the PHP response. Even if I check the source HTML by inspecting the respective HTML elements, the jQuery classes are present over there but functionality is still not working. For your reference I'm giving below the AJAX request code and the response preparation code from PHP file:

//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;
    }
    ?>

I googled a lot about this but still couldn't get the perfect solution which could make the jQuery functionality workable for HTML controls added using AJAX. So can anyone please help me in this regard? Thanks for spending some of your valuable time in understanding my issue. If you need any kind of information regarding the question I can provide you the same. Any kind of help, comments, suggestions, answers will be highly appreciated. Waiting for your precious replies.

  • 写回答

1条回答 默认 最新

  • dongyukang7006 2014-05-04 16:22
    关注

    Wrap the initialization code in a function:

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

    Then call it in your ajax callback:

    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();
     }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥20 求一个html代码,有偿
  • ¥100 关于使用MATLAB中copularnd函数的问题
  • ¥20 在虚拟机的pycharm上
  • ¥15 jupyterthemes 设置完毕后没有效果
  • ¥15 matlab图像高斯低通滤波
  • ¥15 针对曲面部件的制孔路径规划,大家有什么思路吗
  • ¥15 钢筋实图交点识别,机器视觉代码
  • ¥15 如何在Linux系统中,但是在window系统上idea里面可以正常运行?(相关搜索:jar包)
  • ¥50 400g qsfp 光模块iphy方案
  • ¥15 两块ADC0804用proteus仿真时,出现异常