我在我的网站上使用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功能可行。
具有上述指定类的上述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> Add New Rebate</button>
然后在AJAX函数中我调用一个PHP文件。在PHP文件中,我正在做出响应并将其发送回AJAX请求。直到这里一切正常。但我面临的问题是通过AJAX响应添加的HTML控件上的jQuery功能不起作用。在准备PHP响应时,我已经注意添加与上面相同的类。即使我通过检查相应的HTML元素来检查源HTML,jQuery类也存在于那里,但功能仍然无效。作为参考,我在下面给出了来自PHP文件的AJAX请求代码和响应准备代码:
//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;
}
?>
我搜索了很多关于这一点,但仍然无法获得完美的解决方案,这可以使jQuery功能适用于使用AJAX添加的HTML控件。那么有人可以在这方面帮助我吗?感谢您花费一些宝贵的时间来理解我的问题。如果您需要有关该问题的任何信息,我可以为您提供相同的信息。任何形式的帮助,评论,建议和答案都将受到高度赞赏。等待你的宝贵回复。
答案 0 :(得分: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();
}