HI i have face to one issue in my code
$(document).ready(function() {
$(document).on('click', '.rohit', function() {
alert('rohit');
})
$(document).on('click', '.azad', function() {
alert('azad');
})
});
.rohit {
width: 200px;
height: 100px;
background: green;
}
.azad {
width: 100px;
height: 50px;
background: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="rohit">
hello
<div class="azad">
hello azad
</div>
</div>
if i click to azad div than rohit div also trigger alert how to stop to this
i m using to this seriousness in angular js
You can use stopPropagation to avoid triggering the listener of the parent element:
$(document).ready(function(){
$(document).on('click','.rohit', function(){
alert('rohit');
})
$(document).on('click', '.azad',function(e){
e.stopPropagation();
alert('azad');
})
});
.rohit{width:200px;height:100px;background:green;}
.azad{width:100px;height:50px; background:gray;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="rohit">
hello <div class="azad">
hello azad
</div>
</div>
You can use event stopPropagation() method. This method prevents the event propagation to the parents.
$(document).ready(function(){
$(document).on('click','.rohit', function(e){
alert('rohit');
})
$(document).on('click', '.azad',function(e){
e.stopPropagation()
alert('azad');
})
});
Here is the fiddle link https://jsfiddle.net/9c54tow6/
Related
I want to be able to click on a div, but not in the area of another div inside a div inside the outer div.
I tried to select my other div without the inner div using :not() in the selector, but it didn't work.
<div class=outer>
<div class=inner1>
<div class=inner2>
<div class=notClickable>
<div class=alsoNotClickable>
...
</div>
</div>
</div>
</div>
</div>
$("div.outer:not(div.notClickable)").click(function(){
...
});
I expect that I can click inside div class=outer, but not inside div class=notClickable and its childs.
One option is adding stopPropagation() on the non clickable divs.
The stopPropagation() method of the Event interface prevents further
propagation of the current event in the capturing and bubbling phases.
$("div.outer").click(function() {
console.log("click");
});
$("div.notClickable").click(function(e) {
e.stopPropagation();
});
$("div.alsoNotClickable").click(function(e) {
e.stopPropagation();
});
.outer {
width: 300px;
height: 300px;
background-color: green;
}
.notClickable {
width: 100px;
height: 100px;
background-color: red;
}
.alsoNotClickable {
width: 50px;
height: 50px;
background-color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class=outer>
<div class=inner1>
<div class=inner2>
<div class=notClickable>
<div class=alsoNotClickable>
</div>
</div>
</div>
</div>
</div>
To achieve this you can check the target property of the event. If it matches the element you hooked the event to then you know that the event has not bubbled up from a child. Try this:
$("div.outer").click(function(e) {
if ($(e.target).is('div.outer')) {
console.log('You clicked the outer div');
} else {
console.log('You clicked a child div');
}
});
div.outer,
div.outer div {
padding: 10px;
border: 1px solid #CCC;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outer">
Outer
<div class="inner1">
Child
<div class="inner2">
Child
<div class="notClickable">
Child
<div class="alsoNotClickable">
Child
</div>
</div>
</div>
</div>
</div>
I think you can stop the propagation by adding this line to your function:
event.stopPropagation();
Eg:
$("div.outer:not(div.notClickable)").click(function(event) {
...
event.stopPropagation();
});
Please check this fiddle where i use the click function. Let me know if that would fits you :)
Assign an ID to the div you want to select. Then select the ID.
I'm having trouble making a div's background-image change when hovering over a link the code looks fine to me so I'm at a loss here is the code:
Javascript:
$('#hover-01').on('mouseover', function(){
$('#hover-change').css('background-image', 'url("images/1.jpg")');
});
$('#hover-01').on('mouseout', function(){, function(){
$('#hover-change').css('background-image', 'url("images/5.jpg")');
});
HTML:
<div class="open-project-link">
<a id="hover-01" class="open-project"
href="project3.html">Bowman Clay</a>
</div>
<div class="responsive-section-image" id="hover-change"
style="background-image: url(images/5.jpg);">
<div class="overlay"></div>
</div>
jQuery version: v2.1.1
Any idea's or advice?
Edit: the code does work however it was a problem with a 3rd party plugin (I assume) so I fixed it with normal javascript and not jQuery
'mousein' isn't an event handler that you can use. You should use mouseover and mouseout, or mouseenter and mouseleave. See jQuery mouse events here.
You also need to give a width/height to your container that will hold the image, since it has no contents. Also, you have two function() declarations in your mouseout function, I fixed it in the following code sample:
$('#hover-01').on('mouseenter', function(){
$('#hover-change').css('background-image', 'url(http://www.w3schools.com/css/trolltunga.jpg)');
});
$('#hover-01').on('mouseleave', function(){
$('#hover-change').css('background-image', 'url(https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4)');
});
#hover-change {
width:1000px;
height:300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="open-project-link">
<a id="hover-01" class="open-project"
href="project3.html">Bowman Clay</a>
</div>
<div class="responsive-section-image" id="hover-change">
<div class="overlay"></div>
</div>
Use this fiddle:
JS:
$('#hover-01').on('mouseenter', function(){
$('#hover-change').css('background-image', 'url("images/1.jpg")');
});
$('#hover-01').on('mouseout', function(){
$('#hover-change').css('background-image', 'url("images/5.jpg")');
});
You can use jQuery's toggleClass() method to solve your problem like this:
$(document).on('ready', function() {
$('#link').on('mouseover', function() {
//alert('sadasd');
$('body').toggleClass('colored');
});
$('#link').on('mouseleave', function() {
//alert('sadasd');
$('body').toggleClass('colored');
});
});
body.colored {
background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<a id="link" href="#">This is a Link</a>
</div>
Hope this helps!
You can use the CSS :hover ~ to change the hover-change div when hover-01 is hovered over as follows:
#divToHover:hover ~ #divToChange {
/*your code here*/
}
#change {
height: 300px;
width: 300px;
background-image: url("//www.google.com/favicon.ico");
}
#hover {
height: 40px;
width: 40px;
background-color: green;
}
#hover:hover ~ #change {
background-image: url(/favicon.ico);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="hover">hover</div>
<div id="change"></div>
Try the following code. Make sure to set height and width for the div for which you want the background change.
Issue was with your event name used. Refer here for list of mouse events
$('#hover-01').on('mouseover', function() {
$('#hover-change').css('background-image', 'url("https://placehold.it/350x150/ffff00")');
}).on('mouseout', function() {
$('#hover-change').css('background-image', 'url("https://placehold.it/350x150/ff0000")');
});
.responsive-section-image {
height: 150px;
width: 350px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="open-project-link">
<a id="hover-01" class="open-project" href="project3.html">Bowman Clay</a>
</div>
<div class="responsive-section-image" id="hover-change" style="background-image: url('https://placehold.it/350x150/ff0000')">
<div class="overlay"></div>
</div>
A textbox is created on runtime in Javascript. It gets open when user clicks a button.
<input type="text" id="documentTitle" name="documentTitle" value="<spring:message code="document.Title"/>"
On click I want to display textbox text highlighted.
How to fire onload element using JQuery?
Tried following JQuery, but not successful:
$(document).on("load", "#documentTitle" , function() {
myquery.highlightText(this);
});
i don't what you exactly want but here some code that may help you ?
$(document).ready(function() {
alert("on load event fire");
$("button").click(function() {
$("textarea").show();
})
});
textarea {
display: block;
width: 400px;
color: black;
padding: 10px;
text-shadow: 0px 0px 2px rgba(255, 0, 0, 1);
height: 120px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea style="display:none">asdasdasd</textarea>
<button>
show
</button>
You dont have the choice there is no event fired when an arbitrary DOM element such as a <div> becomes ready.
$(document).ready(function(e) {
$(document).on("click", "#test", function() {
$("#content").append('<input type="text" id="documentTitle" name="documentTitle" value=""/>');
//do your highlight here
$("#content #documentTitle").val("test");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="test" value="test" />
<div id="content"></div>
If you really want an event you should create a custom one
$(document).ready(function(e) {
$(document).on("click", "#test", function() {
$("#content").append('<input type="text" id="documentTitle" name="documentTitle" value=""/>');
$("#content #documentTitle").trigger("myLoadedevent");
});
$(document).on("myLoadedevent", "#documentTitle", function() {
//do your highlight here
alert('event');
});
});
I have function that start working when I click on parent and get parent id ( tmp ), but when I click on child my function works too but return undefind. How to get parent id doesn't matter on what I click child or parent or other elemnts in parent div ?
<div class="parent" id="tmp">
<div class="child"></div>
</div>
.parent {
width: 100px;
height: 100px;
}
.child {
width: 50px;
height: 50px;
}
'click .parent': function(e){
console.log($(e.target).attr("id")); // from MeteorJS framework , but same sense
}
In your click handler you should use this to refer to the element that is handling the event:
'click .parent': function(){
console.log(this.id);
}
By using e.target you're targeting the element which originated the event - which in the cases you describe would be the .child element which has no id attribute.
If you are unable to use the this keyword due to restrictions imposed by Meteor, you could instead use the currentTarget property on the event, as it should have the same effect:
'click .parent': function(e){
console.log(e.currentTarget.id); // or $(e.currentTarget).prop('id')
}
try:
$('.parent').click(function(){
console.log($(this).attr('id'));
//console.log($(this)[0].id)
});
or
$('.parent').click(function(e){
console.log(e.currentTarget.id);
});
or
$('.parent').click(function(e){
console.log(e.delegateTarget.id);
});
Is this what you want?
$(function() {
$('div').click(function(e) {
var id = $(e.target).parent().attr('id');
if (typeof id === 'undefined') {
//return current element as this is a parent
console.log($(e.target).attr('id'));
} else {
//return parent's id
console.log(id);
}
});
});
.parent {
width:100px;
height:100px;
background: red;
}
.child {
width:50px;
height:50px;
background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent" id="tmp">
<div class="child">
</div>
</div>
Here is what the UI piece looks like
I had the trashcan working fine on click but that was when I didn't have to have a click event on the blue div. Now that I also have a click event on the blue div, when I click the trashcan, I am getting the blue div object instead of the trashcan object. I tried some z-index tricks, but that didn't work.
Any help appreciated.
<td id="ea-13" class="activityTableCell">
<div style="width:90px; margin-left:0px" class="eventTimeSpan"></div>
<div id="NewActivityContainer-13" class="activityContainerExisting">
<div data-uid="57386445" class="label label-sm label-info newActivityClass point" style="width:59px; top:-1px; left:30px; z-index:4000" title="Mobile Game Party">
Mobile Game Party
<div data-isactivity="1" data-packageid="" data-elid="57386445" class="xRemove" style="left:46px;z-index:8000"><i class="fa fa-trash font-red" title="Remove"></i>
</div>
</div>
</div>
</td>
Click Code:
$(document).on("click", ".newActivityClass", function(){
console.log(this);
...snip...
}
$(document).on("click", ".xRemove,.aRemove", function(){
...snip...
}
you can try event.stopPropagation()
$(document).on("click", ".xRemove,.aRemove", function(event){
event.stopPropagation();
// code here
});
source : https://api.jquery.com/event.stoppropagation/
Yes as stated earlier, event.stopPropagation() does the job for you.
For JsFiddle code: https://jsfiddle.net/peacock/r0kk5ps9/
$(document).on("click", "#inner", function(e){
alert("clicked inner");
e.stopPropagation();
});
$(document).on("click", "#outer", function(e){
alert("clicked outer");
e.stopPropagation();
});
#outer {
width : 100px;
height : 100px;
background-color: #777777;
}
#inner {
position: relative;
top : 50%;
left:50%;
width : 30px;
height : 30px;
background-color: #232323;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer">
<div id="inner">
</div>
</div>