div内のクリックイベントが効かないですが、何が問題でしょうか。デバッグする方法はありますでしょうか。

こんにちは。

jQueryのclickイベントが効かなくはまっております。

.css 内

#test-area{width:100%;border:1px solid #000}
#test-area{height:500px}
#test-area {background:-webkit-linear-gradient(#d3d3d3 1px, transparent 1px),-webkit-linear-gradient(0deg, #d3d3d3 1px, #FFF 1px);background-size:10px 10px;}

.html

<div id ="test-area"></div>

#test-areaのdivをクリックするとchromeのelementタブで<body>が光っています。

jQueryで

  $("#test-area").click(function() {
	  alert(111); → 効きません。
  });

子divのクリックイベントは問題なく動いています。

  $(document).on("click","#test-area > div.drag", function(e) {
	  alert(222); → #test-area内のdivは効きます。
  });

他にpreventDefaultなどはありません。
google探したりしていますが、なかなか解決できなく質問することにしました。
chromeでもieでも現象は一緒でした。
解決方法やデバッグ方法などご存じの方は是非教えてください～

行動規範の内容に同意します

回答3件

みなさん
ありがとうございます。
原因は、
クリックとセレクタブルイベントが同時に定義していたのが問題でした。
＊セレクタブルはドラッグ＋クリックもイベントされることに気づきました。

解決方法も見つかりました。
selectableでクリックが効かない

投稿2015/09/03 01:22

編集2015/09/03 01:34

super

総合スコア33

下記で動作しました。

HTML
1<!doctype html>
2<html>
3  <head>
4  	<meta charset="utf-8">
5    <title>Test</title>
6    <style>
7      #test-area{width:100%;border:1px solid #000}
8      #test-area{height:500px}
9      #test-area{background:-webkit-linear-gradient(#d3d3d3 1px, transparent 1px),-webkit-linear-gradient(0deg, #d3d3d3 1px, #FFF 1px);background-size:10px 10px;}
10    </style>
11    <script src="jquery-2.1.4.min.js"></script>
12    <script>
13    $(function(){
14    	$("#test-area").click(function() {
15      	alert(111);
16  	  });
17    });
18    </script>
19  </head>
20  <body>
21    <div id ="test-area"></div>
22  </body>
23</html>