Question

我正在使用Phonegap开发应用程序。我想在点击另一个div时显示div。当我使用选择器$('div.show_answer')时，没有任何事情发生，但对于$('div')它没问题。看看我的代码：

$(document).ready(function () {

    $('div.show_answer').click(function (e) {
        $(".answer").toggle();
    });
});

我的HTML：

<div class="card">
    <div class="item item-text-wrap puzzle_header">
        {{puzzle.name}}
    </div>
</div>

<div class="card">
    <div class="item item-text-wrap">
        {{puzzle.question}}
    </div>
</div>

<a href="" class="button button-balanced icon-left ion-star show_answer">Show answer</a>
<div class="show_answer">Show answer</div>
<div class="card answer">
    <div class="item item-text-wrap">
        {{puzzle.answer}}
    </div>
</div>

以上HTML文件作为视图加载到Index.html：

中

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <link href="css/ionic.min.css" rel="stylesheet" />
    <meta name="msapplication-tap-highlight" content="no" />
    <script src="js/libs/jquery-1.7.2.min.js"></script>
    <script src="js/libs/ionic.bundle.js"></script>
    <script src="js/libs/angular-route.js"></script>
    <script src="js/data.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/scripts.js"></script>
    <link href="css/styles.css" rel="stylesheet" />
</head>
<body ng-controller="mainCtrl">
    <ion-content>
        <div ng-view>

        </div>
    </ion-content>
    <div class="bar bar-footer bar-assertive ">
        <h1 class="title">Footer</h1>
    </div>

    <script type="text/javascript" src="cordova.js"></script>

</body>
</html>

Answer 1

我假设它是动态加载的内容，所以尝试使用这个JS：

$(document).ready(function () {
    $('body').on('click', 'div.show_answer', function (e) {
        $(".answer").toggle();
    });
});

JQuery选择器不适用于类，但适用于标记

1 个答案: