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

报告相同问题?

悬赏问题

  • ¥15 这是哪个作者做的宝宝起名网站
  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据,怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据,怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题!