Jquery onclick无法正常工作或响应

时间:2014-07-09 20:26:55

标签: javascript jquery

我希望在通过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

2 个答案:

答案 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() {
  });
});