2

I'm developing an app with Phonegap. I want to show a div when clicked on another div. when I use the selector $('div.show_answer') nothing happens but for $('div') it's OK. look at my code:

$(document).ready(function () {

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

My 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>

Above HTML file is loaded as a view inside an 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>

1 Answer 1

5
+100

I assume it's dynamic loaded content, so try to use this JS:

$(document).ready(function () {
    $('body').on('click', 'div.show_answer', function (e) {
        $(".answer").toggle();
    });
});
2
  • Thanks. would you please let me know what was the problem? Dec 7, 2014 at 23:02
  • 1
    @ehsanshirzadi sure - you're loading .show_answer dynamically into your markup so jquery doesn't know about its existence and that's why it doesn't execute click event. using on() function lets jquery execute events even on dynamically generated content. you can read more about this on api.jquery.com/on - paragraph about Delegating etc
    – Paweł
    Dec 7, 2014 at 23:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.