未捕获的TypeError：undefined不是我的jQuery脚本中的函数

时间：2014-07-30 12:03:21

标签： javascript jquery html twitter-bootstrap

我收到了错误

  

未捕获的TypeError：undefined不是函数

在我的jQuery脚本中。这是我的代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">-->
<link rel="stylesheet" href="css/bootstrap.css"/>
<link href="css/dashboard.css" rel="stylesheet">
<link rel="stylesheet" href="css/mycss.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="js/jquery-2.1.1.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
</head>

<body>
    <script type="text/javascript">
        jQuery(document).ready(function() {
            $i = 0;
            $("#append").click(function() {
                $i = $i + 1;
                $(".inc").append('<div class="controls"><input type="text"placeholder="Sub-category Name" name="subcat[]" class="tbox">&nbsp;&nbsp;&nbsp;<a href="#" class="remove_this btn btn-danger btn-sm"><span class="glyphicon glyphicon-remove"></span></a><br><br></div>');
                return false;
            });

            jQuery('.remove_this').live('click', function() { //Error is shown here
                $i = $i - 1;
                jQuery(this).parent().remove();
                return false;
            });
            $("#f_category").submit(function(e) {
                var inputVal = $("#t_catname").val();
                var sactval = $("#t_subcategory").val();
                if (inputVal == "") {
                    alert("Please Enter Category Name");
                    $("#t_catname").focus();
                    e.preventDefault();
                } else if (sactval == "") {
                    alert("Please Enter Atleast One Sub-Category Name");
                    $("#t_catname").focus();
                    e.preventDefault();
                }
            });
        });


    </script> 
    <div id="maindiv" class="container-fluid">
        <div class="navbar navbar-inverse navbar-fixed-top Header" role="navigation" style="border-color: #99ccff;">
<div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand fhtext" href="index.jsp"><img src="Img/dt.png" width="40" height="32" />&nbsp;&nbsp;Catalog Tracking System</a>
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Dashboard</a></li>
            <li><a href="#">Settings</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Help</a></li>
        </ul>
        <form class="navbar-form navbar-right">
            <input type="text" class="form-control" placeholder="Search...">
        </form>
    </div>
</div>
</div>

        <div id="menu_content">

<div class="col-sm-3 col-md-2 sidebar">
<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                    Product Master
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse ">
            <div class="panel-body">
                <ul class="nav nav-sidebar">
                    <li  class="active" ><a href="category.jsp?pg=cat&type=p"><span class="glyphicon glyphicon-list"></span>   Category</a></li>
                    <li ><a href="Subcategory.jsp?pg=scat&type=p"><span class="glyphicon glyphicon-th-list"></span>    Sub-Category</a></li>
                    <li ><a href="Product.jsp?pg=prd&type=p"><span class="glyphicon glyphicon-book"></span>    Product</a></li>
                    <li><a href=""><span class="glyphicon glyphicon-th-large"></span>    Stock</a></li>
                </ul>                </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                    User Master
                </a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse ">
            <div class="panel-body">
                <ul class="nav nav-sidebar">
                    <li ><a href="Role.jsp?pg=rl&type=u"><span class="glyphicon  glyphicon-filter"></span>    Role</a></li>
                    <li ><a href="Level.jsp?pg=lvl&type=u"><span class="glyphicon glyphicon-tree-conifer"></span>    Level</a></li>        
                    <li><a href=""><span class="glyphicon glyphicon-user"></span>    User</a></li>
                    <li><a href=""><span class="glyphicon glyphicon-earphone"></span>    Address</a></li>
                </ul>                </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                    Order Master
                </a>
            </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">
                <ul class="nav nav-sidebar">
                    <li><a href=""><span class="glyphicon glyphicon-shopping-cart"></span>    Order</a></li>
                    <li><a href=""><span class="glyphicon glyphicon-plane"></span>    Shipment</a></li>
                    <li><a href=""><span class="glyphicon glyphicon-map-marker"></span>    Shipment Log</a></li>
                </ul>                
            </div>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour">
                    Reports & Messages
                </a>
            </h4>
        </div>
        <div id="collapseFour" class="panel-collapse collapse">
            <div class="panel-body">
                <ul class="nav nav-sidebar">
                    <li><a href=""><span class="glyphicon glyphicon-file"></span>    Reports</a></li>
                    <li><a href=""><span class="glyphicon glyphicon-bell"></span>    To Do</a></li>
                </ul>               
            </div>
        </div>
    </div>

</div>
</div>

            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
                <h1 class="page-header">Category</h1>
                <ul class="nav nav-tabs" role="tablist">
                    <li><a href="category.jsp?pg=cat">Display</a></li>
                    <li class="active"><a href="#">Add New</a></li>
                    <!--<li><a href="#">Messages</a></li>-->
                </ul>
                <br><br>
                <div class="alert-success"><p></p></div> 
                <div class="col-md-6">
                    <form role="form" action="Con_Category" id="f_category">
                        <div class="form-group">
                            <input type="text" name="action" value="insert" readonly style="display: none;"/>
                            <label>Category Name</label>
                            <input id="t_catname" type="text" class="form-control" placeholder="Category Name" name="cat">
                        </div>                         


                        <div class="control-group form-group">
                            <label class="control-label" for="inputEmail">Sub-Categories</label>
                            <div class="inc">
                                <div class="controls">                                        
                                    <input type="text" placeholder="Sub-category Name" name="subcat[]" id="t_subcategory" class="tbox">&nbsp;&nbsp;
                                    <button class="btn btn-info btn-sm" type="submit" id="append" name="append"><span class="glyphicon glyphicon-plus"></span></button>
                                    <br>
                                    <br>
                                </div>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-default btn-primary"><strong>Submit</strong></button>
                    </form>
                </div> 
            </div>                
        </div>            
    </div>
    <div>
        <div class="footer">
<footer class="fhtext"> 
    <span class="glyphicon glyphicon-copyright-mark"></span>  Powered By<br> Dantek Technologies Pvt. Ltd.
</footer>>
</div>


    </div>
</body>
</html>

This is the screenshot of the page

根据屏幕截图，您可以看到此页面上有加号和交叉按钮，加号按钮添加一组新的文本字段和按钮，十字架将删除旁边的文本字段。目前这个功能不起作用，但如果反过来我脑子里的两个jQuery调用它会起作用，但bootstrap.js的功能将不起作用。

加号和交叉功能适用于jquery.min.js，而bootstrap.js适用于jquery-2.1.1.js。如果我删除jquery.min.js，加减功能将无法工作，如果我删除jquery-2.1.1.js，引导功能将无法正常工作。请告诉我如何解决这个问题，以便我的两个功能都能正常工作。

2 个答案:

答案 0 :(得分：2)

问题在这里

jQuery('.remove_this').live

live方法已从jquery 1.9

中删除

使用.on方法。

答案 1 :(得分：0)

你也可以尝试：

jQuery('.remove_this').click(function() { //Error is shown here
                $i = $i - 1;
                jQuery(this).parent().remove();
                return false;
            });
相关问题
最新问题