Question

在这个jQuery脚本中，当我点击添加客户链接（在图像1中）时，其加载添加客户表单（在图2中）。如何更改此脚本以在我访问页面时自动加载客户表单。请帮助我提前谢谢你。

Screenshot

代码：

<?php  $this->load->view('template/admin_header.php'); ?><!-- load admin header  -->
    <!-- Script for add user box show Start  -->
    <script type='text/javascript'>//<![CDATA[
        $(function () {
            $(function () {
                $('.load').on('click', function () {
                    var ID = $(this).attr('id');
                    $('.div').hide('fast');
                    $('.' + ID).show('fast');
                });
            });
        });//]]>
    </script>
    <!-- Script for add user box show END -->
    <div class="grid">
        <div class="row">
            <?php  $this->load->view('admin/admin_topmenu.php'); ?>
        </div>
        <div class="row">
            <?php  echo form_open('admin/add_users_data')  ?><!-- start of the form -->
            <div class="span8">
                <div style="padding-bottom:11px;">
                    <div class="div add_cus box"><!-- start of the add customer add form -->
                        <feildset>
                            <legend><i class="icon-user-2 on-right on-left"></i><strong>Add Customer</strong></legend>
                            <h6>*All fields marked are required</h6>
                            <lable>Name*</lable>
                            <div class="input-control text" data-role="input-control">
                                <input type="text" name="cus_name" placeholder="type your name">
                                <button class="btn-clear" tabindex="-1"></button>
                            </div>
                            <lable>Email*</lable>
                            <div class="input-control text" data-role="input-control">
                                <input type="text" name="cus_email" placeholder="type your email">
                                <button class="btn-clear" tabindex="-1"></button>
                            </div>
                            <lable>Phone*</lable>
                            <div class="input-control text" data-role="input-control">
                                <input type="text" name="cus_phone" placeholder="type your phone number">
                                <button class="btn-clear" tabindex="-1"></button>
                            </div>
                            <lable>Mobile (for Alerts)</lable>
                            <div class="input-control text" data-role="input-control">
                                <input type="text" name="cus_mobile" placeholder="type your mobile number">
                                <button class="btn-clear" tabindex="-1"></button>
                            </div>
                            <lable>Password*</lable>
                            <div class="input-control text" data-role="input-control">
                                <input type="password" name="cus_password" placeholder="Enter Your password">
                                <button class="btn-clear" tabindex="-1"></button>
                            </div>
                            <lable>Retype Password*</lable>
                            <div class="input-control text" data-role="input-control">
                                <input type="password" name="cus_passconf" placeholder="Enter Your password again">
                                <button class="btn-clear" tabindex="-1"></button>
                            </div>
                            <input name='cus_status' type='hidden' value='disabled'/>
                            <input type="submit" value="Add Customer" class="info">
                        </feildset>
                    </div><!-- END of the add customer add form -->
                </div>
                <div class="div add_oper">
                    RadioButton 2 Selected
                </div>
                <div class="div add_admin">
                    RadioButton 3 Selected
                </div>
            </div>
            <?php  echo form_close(); ?><!-- END of the form -->
            <div class="span2">
                <!-- start of side bar sub -->
                <p><a href="#" id="add_cus" class="load item-title-secondary"><i class="icon-plus on-right on-left"></i>Add
                        Customer</a></p>
                <p><a href="#" id="add_oper" class="load item-title-secondary"><i
                            class="icon-plus on-right on-left"></i>Add Operator</a></p>
                <p><a href="#" id="add_admin" class="load item-title-secondary"><i
                            class="icon-plus on-right on-left"></i>Add Admin</a></p>
                <!-- END of side bar sub -->
            </div>
            <div class="span3">
                <!-- start of side bar main -->
                <nav class="sidebar dark">
                    <ul>
                        <li>
                            <a href="<?php  echo site_url('admin/add_users')  ?>">
                                <i class="icon-plus-2"></i>
                                Add Users
                            </a>
                        </li>
                        <li>
                            <a href="<?php  echo site_url('admin/manage_customer')  ?>">
                                <i class="icon-user-2"></i>
                                Manage Customers
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="icon-user"></i>
                                Manage Operators
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="icon-user-3"></i>
                                Manage Admins
                            </a>
                        </li>
                    </ul>
                </nav>
                <!-- END of side bar main -->
            </div>
        </div>
    </div>
<?php  $this->load->view('template/admin_footer.php'); ?><!-- load admin footer  -->

Answer 1

首先，你不需要两次使用dom ready jquery事件。

 <script type='text/javascript'>//<![CDATA[
        $(function () {
            $(function () {
                $('.load').on('click', function () {
                    var ID = $(this).attr('id');
                    $('.div').hide('fast');
                    $('.' + ID).show('fast');
                });
            });
        });//]]>
    </script>

它可以只是

<script type='text/javascript'>//<![CDATA[
        $(function () {
                $('.load').on('click', function () {
                    var ID = $(this).attr('id');
                    $('.div').hide('fast');
                    $('.' + ID).show('fast');
                });
        });//]]>
    </script>

现在针对您的问题，如果您想在页面加载时加载添加客户表单，您可以通过两种方式实现它。

在页面加载时触发click事件。在点击处理程序
下添加此行
```
            $('.load').click();
```
在页面加载时，显示add_cus div。在点击处理程序
下添加此行
```
            $('.add_cus').show('fast');
```

希望它对你有用。

jQuery onclick自动加载1 div

1 个答案: