Here is the example for UI element construct,
HTML
<div class='wrap'>
<a class='inner-link' href="#">Link</a>
</div>
CSS
.wrap
{
background:#CDD4E0;
width:300px;
height:100px;
padding:20px;
}
.wrap:hover
{
background:#868B93;
}
jQuery
$('.wrap').click(function () {
alert("Handler for wrap container click.");
});
$('.inner-link').click(function () {
alert("Handler for inner link click");
});
What I want to do is to prevent the container with the class .wrap click event when I click the link inside.
You can reference this fiddle example.
Current code fire $('.wrap').click when I do for $('.inner-link').click.
Add if to check if the target does not contain class inner-link.
UPDATE: Oh, the comment has a better way to solve it.
$(".wrap").click(function (e) {
if (e.target.className !== "inner-link") { // add this
alert("Handler for wrap container click.");
}
});
$(".inner-link").click(function (e) {
e.stopPropagation(); // or add this
alert("Handler for inner link click");
});
Try to use event.stopPropagation
Your jQuery codes should be modified as below:
$('.wrap').click(function () {
alert("Handler for wrap container click.");
});
$('.inner-link').click(function (event) {
event.stopPropogation();
alert("Handler for inner link click");
});
thanks #riceEater for the idea with the class. I solved it with this:
var elem = $('.parentElem');
elem.on("click",function(e) {
var hitElementClass = e.target.className;
if (hitElementClass.includes("my-wrapper-class")) {
elem.find("input").trigger("click");
}
});
Related
I already have my code to toggle show and hide the div but whenever I try to add the Hide when clicked outside, it conflicts the toggle code, I need to toggle the div_menu but also hides it when clicked outside just like the facebook drop down menu
$(document).ready(function() {
$(".toggle_menu").click(function(e) {
$(".div_menu").toggle();
e.preventDefault();
});
});
You can do something like
$(document).ready(function () {
$(".toggle_menu").click(function (e) {
$(".div_menu").toggle();
e.preventDefault();
});
$(document).click(function(e){
if(!$(e.target).closest('.toggle_menu, .div_menu').length){
$(".div_menu").hide();
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="toggle_menu">toggle_menu</button>
<div class="div_menu">
<div>some random content menu</div>
</div>
<div style="height: 100px; background: lightgrey;">some other content goes here</div>
use e.target to find the current targeted element ,and using is() Check the current matched set of elements against a selector
$(document).ready(function () {
$(document).click(function (e) {
if ($(e.target).closest(".toggle_menu,.div_menu").length) {
$(".div_menu").toggle();
e.preventDefault();
} else {
$(".div_menu").hide();
}
});
});
DEMO
$("body").click
(
function(e){
if ($(e.target).is($(".toggle_menu"))) {
$(".div_menu").toggle();
}else{
$(".div_menu").hide();
}
}
);
try this
$(document).click(function(e){
if($(e.target).parents('.div_menu').length == 0 && $(e.target).attr('class') != "div_menu"){
$(".div_menu").toggle();
}
});
$(document).ready(function() {
$(".toggle_menu").click(function(e) {
$(".div_menu").toggle();
e.preventDefault();
});
$(document).click(function(e) {
$(".div_menu").hide();
});
});
I have a table with some div's inside it.
I want an event to happen when I click on a td element, but I also want an event to happen when I click on a div element.
As you can see in this fiddle http://jsfiddle.net/rkGkp/1/ my problem is, when I click on the div element, both the div and td event is triggered, but I only want the div's event to be triggered.
I use these event listeners
$(function() {
$("#div").on("click", function() {
alert("a div is clicked");
});
});
$(function() {
$(".td").on("click", function() {
alert("a td is clicked");
});
});
What can I do to avoid the element behind my div to trigger an event?
Have a look here: FIDDLE
I used stopPropagation()
CODE
$("#div").on("click", function(event) {
event.stopPropagation();
alert("a div is clicked");
});
This is the easiest way to achieve what you need. Simply check if the click target is on the div:
$(function() {
$("#div").on("click", function() {
alert("a div is clicked");
});
});
$(function() {
$(".td").on("click", function(e) {
if(!$(e.target).is("#div")){
alert("a td is clicked");
}
});
});
I want to show a div on link click and hide if click outside the link or div.
login
<div class="login-panel">
<input type="text" id="LoginForm_username" name="LoginForm[username]" class="field" value="username">
<input type="password" id="LoginForm_password" name="LoginForm[password]" class="field" value="password">
<input type="submit" value="Login" class="loginBtn">
</div>
initially div is hidden. and script is
$(document).ready(function() {
$("#login").click(function () {
$("div.login-panel").toggle();
});
$("body").click(function(e){
if(e.target.className == "login" || e.target.className == "login-panel") {
//alert("do't hide");
}
else {
$(".login-panel").hide();
}
});
});
when I click on link div shows and overlaps some other elements, and when I click outside the body it dies.
But the problem is when I click on input box to enter username login-panel div get hides.
why div hide?
any guidance will be appreciated.
http://jsfiddle.net/thirtydot/F4p2x/15/
$(document).ready(function() {
$("#login").click(function(e) {
$(".login-panel").toggle();
e.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('.login-panel, .login-panel *')) {
$(".login-panel").hide();
}
});
});
You should do it like this:
http://jsfiddle.net/VWENB/1/
$("#login").click(function(e) {
$("div.login-panel").toggle();
e.stopPropagation();
});
$("body").click(function(e) {
if (e.target.className == "field") {
//alert("do't hide");
} else {
$(".login-panel").hide();
}
});
When you are clicking on a sub-element, your condition (e.target.className) is not applied to your parent element (<div class="login-panel">). But you can use the closest function of jQuery (see here) in order to test if you are in your parent element :
if(e.target.className == "login" || $(e.target).closest(".login-panel").length === 1) {
...
}
PROBLEM is when i click on input box to enter username login-panel div
get hides. why div hide?
Because, you clicked the body too, when clicking in the div. Then both events are triggered. Check out event.stopPropagation() which you may use in the else part of body.onclick.
That because your input lies inside #login div, so if you click inside this div it will hide. So you can use jquery :not selector to specify those excluded elements
$(document).ready(function () {
$("#login,:not('#LoginForm_username'),:not('#LoginForm_password')").click(function () {
$("div.login-panel").toggle();
});
$("body").click(function (e) {
if (e.target.className == "login" || e.target.className == "login-panel") {
//alert("do't hide");
} else {
$(".login-panel").hide();
}
});
});
DEMO
Here you go:
$(document).ready(function () {
$("#login").click(function () {
$("div.login-panel").toggle();
});
$("body").click(function (e) {
if (e.target.nodeName != "INPUT" && e.target.className!= "login" && e.target.className!= "login-panel") {
$(".login-panel").hide();
}
});
});
You were using the wrong selector in your if to check if a click on the body wasn't targeting a input element.
Fiddle
Just find mouse when the click event occur,
<script type="text/javascript">
find_mouse = false;
$(document).ready(function()
{
$('.login-panel').hover(function(){
find_mouse=true; // if mouse on login-panel
}, function(){
find_mouse=false; // not on login panel
});
$("body").click(function(){
if(! find_mouse) // if not on login panel
$('.login-panel').hide();
});
});
</script>
As the other saying clicking input cause event triggering in the body so you should check if the sender is child of the login I think below code do the trick;
$("body").click(function (e) {
var $sender = $(e.target);
if ($sender.closest(".login-panel").length) {
return ;
}
$(".login-panel").hide();
});
Edit : update the condition with closest as it is correct function.
Begins with the current element, Travels up the DOM tree until it finds a match for the supplied selector. The returned jQuery object contains zero or one element for each element in the original set.
I have a problem with jQuery selectors:
$("ul.questions li").not(".title, .content").click().live('click', function(){
$(".inspector").slideToggle();
if($(this).hasClass("selected")) {
$(this).removeClass("selected");
} else {
$(this).addClass("selected");
}
});
In that code it works if I remove .not(".title, .content"). but if I add it, it just doesn't gets the click. I use live because usually the elements are added through .append(), except some ones. This is an example: http://jsfiddle.net/88w8N/ . Basically I want to handle click on the li element, but not if it clicks on the .title and .content divs. What I'm doing wrong? Thanks!
You need to stop jQuery from triggering an event attached to the parent when the child is triggered.
You need to use jQuery's event.stopPropagation() function, which
Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
In your code specifically: http://jsfiddle.net/88w8N/21/
$("ul.questionssel li div, ul.questionsnosel li div").on('click', function(e) {
e.stopPropagation();
});
UPDATE
To fix your "live" issue, try the following modification: http://jsfiddle.net/88w8N/25/
$("ul.questionssel").on('click', 'li', function() {
//$(".inspector").slideToggle();
if($(this).hasClass("selected")) {
$(this).removeClass("selected");
} else {
$(this).addClass("selected");
}
});
$("ul.questionsnosel").on('click', 'li', function() {
//$(".inspector").slideToggle();
if($(this).hasClass("selected")) {
$(this).removeClass("selected");
} else {
$(this).addClass("selected");
}
});
$("ul.questionssel li div, ul.questionsnosel li div").on('click', function(e) {
e.stopPropagation();
});
You can use not selector instead of not function
http://api.jquery.com/not-selector/
Try :not("...") instead of .not("...")
please double-check these links:
http://api.jquery.com/attribute-not-equal-selector/
http://api.jquery.com/not-selector/
http://api.jquery.com/category/selectors/
question from a beginner..
I want to show/hide an inner div when the mouse enter/out from the parent div. I tried first with onmouseover, onmouseout events, but the problem is that onmouseover keep firing while the mouse over the div, and I want it to fire one time only.
I found JQuery events that might help me, but I don't know where can I put this code because my divs exist in a template for a control, and there is no onload event for the div.
<script type="text/javascript" language="javascript">
// Where should I call this !!!
function Init(sender) {
$(sender).bind("mouseenter", function () {
$(sender.childNodes[1], this).show(500);
}).bind("mouseleave", function () {
$(sender.childNodes[1], this).hide(500);
});
}
</script>
Any help!
You can use mouseenter and mouseleave events.
You can put your code in the and bind your with these events.
<script type="text/javascript" language="javascript">
$(document).ready(function(){
Init('.your_div_class');
});
function Init(sender) {
$(sender).bind("mouseenter", function () {
$(sender.childNodes[1], this).show(500);
}).bind("mouseleave", function () {
$(sender.childNodes[1], this).hide(500);
});
}
</script>
Thanks for everybody. as YNhat said, I have to use classes instead of Ids. and this is the code that I used and it's work well.
$(document).ready(function () {
InitEntities();
});
function InitEntities() {
var parentDiv = $(".parentDivClass");
parentDiv.each(function (index) {
var childDiv = $(this).children(".childDivClass");
$(this).bind("mouseenter", function () {
$(childDiv, this).show(250);
}).bind("mouseleave", function () {
$(childDiv, this).hide(250);
});
});
}
css
.parent_div .inner_div
{
display:none;
}
.parent_div:hover .inner_div
{
display:block;
}
This is what I use in a script.
Once the document is fully loaded ($(document).ready) the mouseover event is bound.
I then unbind the event when I'm in it (to prevent it from spamming the event) and bind the mouseleave event.
$(document).ready(function() {
$("#loginformwrapper").bind("mouseover", showLoginForm);
});
function showLoginForm() {
$("#loginformwrapper").unbind("mouseover", showLoginForm);
$("#loginform").animate({
top: '+=80'
}, 1000, function() {
$("#loginform").bind("mouseleave", hideLoginForm);
});
}
function hideLoginForm() {
$("#loginform").unbind("mouseleave", hideLoginForm);
$("#loginform").animate({
top: '-=80'
}, 1000, function() {
$("#loginformwrapper").bind("mouseover", showLoginForm);
});
}
Use this:
<script type="text/javascript">
$(function(){
var mydiv = $("#parent_div_id");
$(mydiv).bind("mouseenter", function () {
$(mydiv.childNodes[1], this).show(500);
}).bind("mouseleave", function () {
$(mydiv.childNodes[1], this).hide(500);
});
});
</script>
replace the "parent_div_id" with the id of your parent div