jQuery，我该如何仅使主要 <div> 可以点击？
[英]JQuery, How can I make only the main <div> be clickable?
问题描述
I am creating a JQuery plugin to toggle between a certain div. 
我正在创建一个JQuery插件以在某个div之间切换。 I have one div that is visible that you can click on to toggle the hidden div. 我有一个可见的div，您可以单击以切换隐藏的div。 I get the hidden div to appear but when I click on the hidden div it disappears. 我使隐藏的div出现，但是当我单击隐藏的div时，它消失了。 How can I make the hidden div appear and stay visible even when I click on the hidden div? 即使单击隐藏的div，如何使隐藏的div出现并保持可见？
Here is my code. 这是我的代码。
HTML: HTML：
<html>
<head>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<div id="clickable_box" class="tooltip4"></div>
<script type="text/javascript">
$('div.tooltip4').tooltip()
</script>
</body>
</html>
CSS: CSS：
#appearing_box {
display: none;
border: 1px solid #BFBFBF;
height: 50px;
width: 150px;
}
#clickable_box {
height: 50px;
width: 50px;
border: 1px solid black;
}
JQuery: jQuery的：
(function($){
$.fn.tooltip = function(options) {
this.each(function() {
var $this = $(this);
var $box = $('<div id="appearing_box"> <form><textarea>When?</textarea><form> </div>');
$this.click(function() {
$($box)
.appendTo($this)
.css({
backgroundColor: '#0099ff'
}),
$box.toggle();
});
});
};
})(jQuery);
2 个解决方案
解决方案1
0 已采纳 2013-04-03 20:03:11
since your appering_box div is inside .tooltip .. the click on appering_box is calling the .tooltip click .. so try e.pstopPropagation() on appearing_box click function to stop the event bubble.. 由于您的appering_box div位于.tooltip ..中，因此，单击appering_box会调用.tooltip click ..，因此请尝试对e.pstopPropagation() click函数使用e.pstopPropagation()以停止事件气泡。
try this 尝试这个
$.fn.tooltip = function(options) {
...
//your codes
};
$(".tooltip4").on('click', "#appearing_box",function(e) {
e.stopPropagation();
})
解决方案2
0 2013-04-03 20:07:26
Attach the following delegated event handle to your code: 将以下委托事件句柄附加到您的代码：
$this.on('click', '#appearing_box', function (e) {
e.stopPropagation();
});
Here is the fiddle . 这是小提琴 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.