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選擇器不適用於類，但適用於標籤

回答

相關問題