我希望在通过jquery点击用户名时获取用户的详细信息,我有以下脚本:
$(document).ready(function(){
$('.employee_identification').keyup(function() {
var employee_identification = $('.employee_identification').val();
html = '';
$.ajax({
type: "GET",
url: "<?php echo base_url(); ?>admin_profile/get_employee_names/" + employee_identification,
dataType: "json",
success: function(response) {
employee_name_results = $('#employee_name_results').empty();
$.each(response, function(i, response) {
var f_name = response.f_name;
var s_name = response.s_name;
var other_name = response.other_name;
var identification_no = response.identification_no;
var str = f_name + s_name + other_name;
var employee_id = response.employee_id;
employee_name_results.append('<label class="form-label-top">Employee Name : </label> <a id="employee_name_searched" class="employee_name_searched btn btn-success" href="#add_user_window" value="' + str + '">' + str + '</a></br> <label class="form-label-top"> Identification Number: </label><span>' + identification_no + '</span><input type="hidden" value="' + employee_id + '" class="employee_searched_id" id="employee_searched_id"/></br>');
});
},
error: function(data) {
alert(data);
}
});
});
$('.employee_name_searched').click(function() {
alert('clicked');
var employee_id = $('.employee_searched_id').val();
$.ajax({
type: "GET",
url: "<?php echo base_url(); ?>admin_profile/get_employee_name_clicked/" + employee_id,
dataType: "json",
success: function(response) {
$.each(response, function(i, response) {
var f_name = response.f_name;
var s_name = response.s_name;
var other_name = response.other_name;
var is_active = response.is_active;
var employee_id = response.employee_id;
$('#add_f_name').val(f_name);
$('#add_s_name').val(s_name);
$('#add_other_name').val(other_name);
$('#add_is_active').val(is_active);
$('#add_employee_id').val(employee_id);
});
},
error: function(data) {
alert(data);
}
});
});
});
//HTML
<div> <a class="add_zone btn btn-success" id="add_user" href="#employee_search_window">
<i class="icon-plus-sign icon-white"></i>
Add User
</a> </div>
<!-- Employee User name search begins here -->
<div id="employee_search_window" class="employee_search_window" style="display: none !important;">
<form>
<div class="form-all">
<ul class="form-section">
<li id="cid_30" class="form-input-wide">
<label>Employee's Identification Number : <span class="form-required">*</span> </label>
</li>
<li>
<p class="red important">
Please provide employees Identification number :
</p>
<input type="text" class="employee_identification" id="employee_identification"/>
</li>
</ul>
</div>
<div id="employee_name_results" class="employee_name_results">
<label class="form-label-top">Employee Name : </label>
</div>
</form>
</div>
<!-- Add User Details Begins from here -->
<div id="add_user_window" style="display:none !important;">
<form class="add_user_form" id="add_user_form" method="post" >
<div class="form-all">
<ul class="form-section">
<li id="cid_30" class="form-input-wide">
<div class="form-header-group">
<h2 id="header_30" class="form-header">
User Information
</h2>
</div>
</li>
<li class="form-line" id="id_5">
<label class="form-label-top" id="label_5" for="user_name">
User Name<span class="form-required">*</span>
</label>
<div id="cid_5" class="form-input-wide">
<input type="text" class="form-number-input user_name form-textbox validate[required, Numeric]" id="user_name" name="add_user_name" style="width:204px" size="23" maxlength="8" data-type="input-number" />
</div>
</li>
<li class="form-line form-line-column" id="id_6">
<label class="form-label-top" id="label_6" for="f_name">
First Name<span class="form-required">*</span>
</label>
<div id="cid_6" class="form-input-wide">
<input type="text" class=" form-textbox f_name validate[required]" id="f_name" name="add_f_name" size="30" />
</div>
</li>
<li class="form-line form-line-column" id="id_6">
<label class="form-label-top" id="label_6" for="s_name">
Sur Name<span class="form-required">*</span>
</label>
<div id="cid_6" class="form-input-wide">
<input type="text" class=" form-textbox zone_rate validate[required]" id="s_name" name="add_s_name" size="30" />
</div>
</li>
<li class="form-line form-line-column" id="id_6">
<label class="form-label-top" id="label_6" for="other_name">
Other Name<span class="form-required">*</span>
</label>
<div id="cid_6" class="form-input-wide">
<input type="text" class=" form-textbox zone_rate validate[required]" id="other_name" name="add_other_name" size="30" />
</div>
</li>
<li class="form-line form-line-column" id="id_6">
<label class="form-label-top" id="label_6" for="employee_type">
Employee Type<span class="form-required">*</span>
</label>
<div id="cid_6" class="form-input-wide">
<select name="add_employee_type">
<?php ?>
<option>Select Employee Type</option>
<option value="Administrator">Administrator</option>
<option value="Director">Director</option>
<option value="Manager">Manager</option>
<option value="Accounts">Accounts</option>
</select>
</div>
</li>
<li class="form-line form-line-column" id="id_36">
<label class="form-label-top" id="label_36" for="is_active">
Is Active ?<span class="form-required">*</span>
</label>
<div id="cid_36" class="form-input-wide">
<select name="add_is_active">
<option value="Yes" >Yes</option>
<option value="No">No</option>
</select>
</div>
</li>
<li>
<input id="add_employee_id" class="add_employee_id" type="text"/>
</li>
<li class="form-line" id="id_27">
<div id="cid_27" class="form-input-wide">
<div style="text-align:left" class="form-buttons-wrapper">
<input type="submit" id="add_user_button" class="add_user_button" value="Add New User Details" />
</div>
</div>
</li>
</ul>
</div>
</form>
<p class="center">
</p>
<div class="clearfix"></div>
</div>
<!-- End of Add Employee Details -->
单击employee_name_searched时,应运行第二个单击的功能以获取用户的详细信息,但点击时根本没有响应。我做错了什么?我一直收到以下错误:TypeError: e._impala is undefined
答案 0 :(得分:1)
添加事件侦听器后创建元素。您需要使用.on()
,或者需要在创建每个元素时将事件绑定到每个元素。
答案 1 :(得分:0)
在创建employee_name_searched
元素后,将click()函数移动到keyup()函数内。
您必须执行此操作的原因是因为您将on click函数绑定到页面加载时不存在的元素,因为您已将其置于on ready函数内。您尚未进行关键动作,因此尚未创建元素。
试试这个:
$('.employee_identification').keyup(function() {
// ajax request and append your new element
// bind your on click function to the element
$('.employee_name_searched').click(function() {
});
});