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

我正在开发带Phonegap的应用程序。我想单击另一个div时显示div。当我使用选择器$('div.show_answer')时，没有任何反应，但对于$('div')没有问题。看看我的代码：JQuery选择器不适用于类，但适用于标签

$(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>

来源

2014-12-07 ehsan shirzadi

我以为这是动态加载的内容，所以试着用这个JS：

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

来源

2014-12-07 22:27:06

谢谢。请你让我知道是什么问题？ – 2014-12-07 23:02:59

@ehsanshirzadi肯定 - 您正在将.show_answer动态加载到您的标记中，所以jquery不知道它的存在，这就是为什么它不执行click事件。使用on（）函数可以让jquery在动态生成的内容上执行事件。你可以在http://api.jquery.com/on/阅读关于这个的更多信息 - 关于委托等的段落 – 2014-12-07 23:10:15

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

回答

相关问题