我的网站使用 PHP、jQuery、Smarty 等。我有一个 HTML 表单。在这种形式中有一个选择控件和几个日历控件。这些控件中添加了一些类来实现一些 javascript 功能。当表单第一次加载时,应用于这些控件的类起作用,但是当我附加应用了相同类的相同控件时,javascript 功能不起作用。为什么会发生这种情况以及如何解决这个问题?为了供您引用,我将下面的小代码片段放在下面: HTML 代码:
<input class="form-control date_control" placeholder="yyyy-mm-dd" type="date" name="rebate_start_date[1]" id="rebate_start_date_1" value="{$data.rebate_start_date}">
<input class="form-control date_control" placeholder="yyyy-mm-dd" type="date" name="rebate_expiry_date[1]" id="rebate_expiry_date_1" value="{$data.rebate_expiry_date}">
<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>
PHP 文件的 AJAX 响应如下:
$rebate_no = $_POST['rebate_no'];
$states = '';
foreach ($state_list as $key => $value) {
$states .= "<option value=".$value['id'].">".$value['state_name']."</option>";
}
<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'>
$states
</select>
实际代码非常大。我只放入了代码的一小部分和必要的部分。您能在这方面帮助我吗?提前致谢。 jQUery AJAX功能代码如下:
$(function() {
$(".add_new_rebate").on("click", function(event) {
event.preventDefault();
var manufacturer_id = $("#company_id").val();
/*if($.active > 0) { //or $.active
request_inprogress();
} else {*/
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();
}
});
});
});
最佳答案
因为 jQuery 仅解析加载的 DOM,所以它不适用于 jQuery 处理后添加到 DOM 的内容。查看 jQuery API 中的“on”函数
关于javascript - 为什么 jQuery 类不适用于 AJAX 响应生成的 HTML 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23455511/