【jquery】jquery代码操控元素无效且控制台不报错？可能是该元素不存在

最新推荐文章于 2022-07-02 18:12:08 发布

phenix_alice

最新推荐文章于 2022-07-02 18:12:08 发布

阅读量867

点赞数

分类专栏：前端文章标签： jqury无效 angularJS

本文链接：https://blog.csdn.net/diyinqian/article/details/81436329

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

背景：

项目里我用了angularJS,jqury，bootstraps。

最大收获：

ng-view里的替换代码不在网页源代码中存在，因此无法用jqury去操控。如果想用jquery得在那个元素里写onclick = func();如果想要操控元素的话，就用angularJS。

其他收获：

js执行不报错是因为没有语法错误，浏览器不会检查你jquery代码操控的元素ID是否存在。
使用ng-view和angular路由的方式进行页面切换，在网页源代码中不含ng-view里的元素。因此，jqury找不到ng-view里面你写的那些ID，因此无法操控。
那么在ng-view中的元素如何触发事件呢？应该在里面加入onclick()=funtion();
谷歌浏览器的控制台中可以直接进行jquery代码的编写，比如函数定义之类。也可以执行$(“#userInf-btn”).click();这样的函数来进行事件的触发。
可以通过在JS代码中加入console.log(“xxx”);来进行代码的简单测试。

下面是让我痛彻心扉的困扰一晚上的代码：

index.html:

<!DOCTYPE html>
<html lang="zh">

<head>
    <title>xxx系统</title>
    <meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE=Edge">
</head>

<body ng-app="paperListApp">
    <div class="container">
        <nav class="navbar  nav-justified navbar-dark bg-dark">

            <a class="nav-item nav-link" id="paperList" href="#/">公文列表</a>
            <a class="nav-item nav-link" id="majorPaper" href="#/majorPaper">核心文章</a>
            <a class="nav-item nav-link" id="onlineWriting" href="#/onlineWriting">在线写作</a>
            <a class="nav-item nav-link" id="paperAnalyse" href="#/paperAnalyse"></a>
            <a class="nav-item nav-link" id="documentPreparation" href="#/documentPreparation">文书拟制</a>
            <a class="nav-item nav-link" id="dataBackup" href="#/dataBackup">数据备份</a>
            <a class="nav-item nav-link" id="personalCenter" href="#/personalCenter">个人中心</a>
        </nav>

        <div ng-view></div>

        <div class="footer foot-row row">
            ...
        </div>
    </div>
   <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <script src="/onlyofficeeditor/scripts/bootstrap/jquery-1.11.3.min.js"></script>
    <script src="/onlyofficeeditor/scripts/bootstrap/bootstrap.js"></script>
    <script src="/onlyofficeeditor/scripts/angularJS/angular.min.js"></script>
    <script src="/onlyofficeeditor/scripts/angularJS/angular-route.min.js"></script>
    <script src="/onlyofficeeditor/scripts/angularJS/angular-cookies.min.js"></script>
    <script src="/onlyofficeeditor/scripts/myScript/index.js"></script>
    <script src="/onlyofficeeditor/scripts/myScript/personalCenter.js"></script>
</body>

</html>

配置路由的angularJS代码：index.js

var main = angular.module("paperListApp", ['ngRoute', 'ngCookies']);

angular.module('paperListApp',['ngRoute'])
    .config(['$routeProvider',function($routeProvider){
        $routeProvider.when("/", {
            templateUrl:"/onlyofficeeditor/html/paperList.html"
        }).when("/majorPaper", {
            templateUrl:"/onlyofficeeditor/html/majorPaper.html"
        }).when("/onlineWriting", {
            templateUrl:"/onlyofficeeditor/html/onlineWriting.html"
        }).when("/paperAnalyse", {
            templateUrl:"/onlyofficeeditor/html/paperAnalyse.html"
        }).when("/documentPreparation", {
            templateUrl:"/onlyofficeeditor/html/documentPreparation.html"
        }).when("/dataBackup", {
            templateUrl:"/onlyofficeeditor/html/dataBackup.html"
        }).when("/personalCenter", {
            templateUrl:"/onlyofficeeditor/html/personalCenter.html"
        }).otherwise({
            redirectTo:'/404'
        });
}]);

ng-view里的代码：personalCenter.html

<div class="row-noMargin"  >
    <!-- 左侧按钮组 -->
    <div class="white-bg personalCenter-left">
        <div>
            <button class="btn-block mybtn-block" id="userInf-btn">用户信息</button>
        </div>
        <div>
            <button class="btn-block mybtn-block" id="function-btn">功能权限</button>
        </div>
    </div>

无法生效的js代码：personalCenter.js

$("#userInf-btn").click(function(){
    alert("asdfasdf");});
$(document).ready(function(){
    console.log("222");//能打印出来
    $("#userInf-btn").hide("fast",function(){
           alert("Animation Done.");//不能打印
         });
    console.log("444");//能打印出来
});