I want to trigger something when I click on a certain class within a div.
I tried this
$("div .event").click(function() {
alert($( this ).text());
});
And
$("div").on("click", $('.event'), function() {
alert($( this ).text());
});
//Or
$(".SimpleCalendar .event").click(function() {
alert($( this ).text());
});
//I do not even know what this is supposed to do ...
$(".SimpleCalendar tbody tr td div .event").click(function() {
alert($( this ).text());
});
And many more but still can not figure out why this is not working
My HTML is the following :
The div that you're selecting is the one that has the class .event, not a descendant of it. Therefore the correct selector is div.event. Try this:
$("div.event").click(function() {
alert($( this ).text());
});
Or just:
//Warning: if elements unlike the div also have the event class then stick to
//the above as the selector is more specific
$(".event").click(function() {
alert($( this ).text());
});
And don't forget that each of these options should be in DOM ready like so:
$(function() {
$("div.event").click(function() {
alert($( this ).text());
});
});
You were making use of parent descendent selector, since event class is on the div itself and not its descendent your selector was incorrect.
One of these should work for you
Try this
$("div.event").click(function() {
alert($( this ).text());
});
or,
$(".SimpleCalendar").on("click", '.event', function() {
alert($( this ).text());
});
For more information on choosing right selectors please see this
Related
$( document ).ready(function() {
$('#handler').on('click', '.selector', function(){
alert( $(this).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="handler">
handler content
selector content
</div>
How do I get the #handler inside the on method without explicitly specifying it?
Use the event "delegateTarget" property
$( document ).ready(function() {
$('#handler').on('click', '.selector', function(e){
console.log(e.delegateTarget);
});
});
Working example:-
$( document ).ready(function() {
$('#handler').on('click', '.selector', function(e){
console.log(e.delegateTarget);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="handler">
handler content
child
<div>
grand child
</div>
<div>
<div>
great grand child
</div>
</div>
</div>
In this specific case you can directly use the unique id you have
$("#handler").
In case if that is a class, you have $(this).parent() to the top level.
you can chain it to nth level , till you reach the top. $(this).parent().parent()...
or since you know the selector, you can do $(this).parents("selector")
Use closest() if the parent has hierarchy,
$(this).closest('div')
and use parent() if it is direct parent of target element,
$(this).parent('div');
And the selector is unique and has id like handler then the best option is
$('#handler')
Change it to
$( document ).ready(function() {
$('#handler').on('click', function(){
//$(this) here will be #handler.
});
});
Or if you still want the function to fire when someone clicks on .selector then you can do the following
$( document ).ready(function() {
$('#handler').on('click', '.selector', function(){
var handler = $(this).parent();
});
});
I want to change the ID of an element (a <div>) using jQuery. Below is an example of my JavaScript, CSS and HTML. Right now, when I click the <div>, nothing happens.
$( ".pre_div" ).click(function() {
$( ".pre_div" ).attr('id','after_div');
});
$( ".after_div" ).click(function() {
$( ".after_div" ).attr('id','pre_div');
});
#pre_div {width:20px;height:20px;background-color:red;cursor:pointer;}
#after_div{width:20px;height:20px;background-color:blue;cursor:pointer;}
<div id="pre_div">:-)</div>
. is for classes and # is for ids, plus you have to use the .on() function, otherwise it will not work
$(document).on('click','#pre_div',function() {
$(this).attr('id','after_div');
});
$(document).on('click','#after_div',function() {
$(this).attr('id','pre_div');
});
JSFIDDLE DEMO
You should use # – id selector – instead of . – class selector (also, you can use this to access element within it's event listener):
$( "#pre_div" ).click(function() {
$(this).attr('id','after_div');
});
$( "#after_div" ).click(function() {
$(this).attr('id','pre_div');
});
JSFiddle
Please use $(this) to refer to the clicked item otherwise you may give many item the same id. However, with this approach, you are still assiging the same id to each clicked div, which is not good. How about adding the index of the clicked div to make it a unique id:
$(".pre_div").click(function() { //any div with pre_div class
$(this).attr('id'+ $(this).index(),'after_div');
});
$(".after_div").click(function() { //any div with after_div class
$(this).attr('id'+ $(this).index(),'pre_div');
});
"pre_div" and "after_div" are not classes, they are id's of your div
Should access it like this way.
$( "#pre_div" ).click(function() {
$( "#pre_div" ).attr('id','after_div');
});
$( "#after_div" ).click(function() {
$( "#after_div" ).attr('id','pre_div');
});
My home page contains multiple boxes.
On each boxes, when mouseover in or out , the title disappears and the content appears.
It works fine.
The problem is that when mouseovering more than one box on a short period of time, it is a mess.
$( ".views-field-wrapper" ).each(function(){
$( this ).hover(function() {
$( "#front_panel",this ).fadeOut(400);
$( "#back_panel",this ).delay(500).fadeIn(1000);
}, function(){
$( "#back_panel",this ).fadeOut(400);
$( "#front_panel",this ).delay(500).fadeIn(1000);
});
});
How can I stop the previous mouseover reaction when mouseovering another box?
EDIT :
My intial code: http://jsfiddle.net/tz3d6ct6/
Kumar's code that works perfectly with jquery > 1.6 (I must use jquery1.4) http://jsfiddle.net/hrkf5p7w/
Try to use stop() and no need to use loop to bind hover event,
$( ".views-field-wrapper" ).hover(function() { // no need to use each loop
$( "#front_panel",this ).stop(true).fadeOut(400);
$( "#back_panel",this ).delay(500).fadeIn(1000);
}, function(){
$( "#back_panel",this ).stop(true).fadeOut(400);
$( "#front_panel",this ).delay(500).fadeIn(1000);
});
Try it without using using delay() like,
$(".views-field-wrapper").hover(function () { // no need to use each loop
$("#front_panel", this).stop(true).fadeOut(400);
$("#back_panel", this).fadeIn(1000);
}, function () {
$("#back_panel", this).stop(true).fadeOut(400);
$("#front_panel", this).fadeIn(1000);
});
$(".views-field-wrapper").hover(function () { // no need to use each loop
$("#front_panel", this).stop(true).fadeOut(400);
$("#back_panel", this).fadeIn(1000);
}, function () {
$("#back_panel", this).stop(true).fadeOut(400);
$("#front_panel", this).fadeIn(1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='views-field-wrapper type-t nodetype-t'>
<div id='front_panel'>title</div>
<div style='display:none' id='back_panel'>teaser</div>
</div>
I am using following code to add line to my submenu :
$("li.mega-menu-megamenu a").hover(function(){
$( "<div class='remove'><hr /></div>" ).insertAfter("#mega-menu-primary-2 li:last-child" );
});
Its working perfectly fine.But the issue is that I want to remove that tag when there is no hover.
I have tried this : $("li.mega-menu-megamenu a").unbind('hover'); But by doing this, it will not add html tags at all.
How can I remove line when there is no hover on menu ?
You can use mouseout event for that
$("li.mega-menu-megamenu a").mouseout(function() {
$(".remove").remove();
});
$("li.mega-menu-megamenu a").mouseenter(function() {
$("<div class='remove'><hr /></div>").insertAfter("#mega-menu-primary-2 li:last-child");
});
Another possible solution is, instead of adding and removing the element you can just hide/show it.
$(document).ready(funnction() {
$("<div class='remove'><hr /></div>").insertAfter("#mega-menu-primary-2 li:last-child");
$(".remove").hide();
$("li.mega-menu-megamenu a").mouseout(function() {
$(".remove").hide();
});
$("li.mega-menu-megamenu a").mouseenter(function() {
$(".remove").show();
});
});
I would opt for hide/show so you don't keep adding/removing from the DOM.
// Add the element to the DOM once and then hide it
var $removeElement = $( "<div class='remove'><hr /></div>" )
.insertAfter( "#mega-menu-primary-2 li:last-child" )
.hide();
// On mouseover we show the $removeElement and mouseout will hide it
$("li.mega-menu-megamenu a")
.hover(function(){ $removeElement.fadeIn(); },
function() { $removeElement.fadeOut(); }
);
I used fadeIn/fadeOut but you can use show/hide instead if prefered.
You can pass 2 functions to hover. Second will be called when mouse is exiting the element.
$("li.mega-menu-megamenu a").hover(function() {
$("<div class='remove'><hr /></div>").insertAfter("#mega-menu-primary-2 li:last-child");
},
function() {
$(".remove").remove();
});
Another way:
$('li.mega-menu-megamenu a').on({
'mouseenter':function(){
$("<div class='remove'><hr /></div>").insertAfter("#mega-menu-primary-2 li:last-child");
},'mouseleave':function(){
$(".remove").remove();
}
});
I have index.php and will load index-edit.php with a button click into index.php in a <div class="edit-wrapper"> </div>. I have some input in index.php and some input in index-edit.php. I want to add .active class to them on focus out, but jQuery does not add .active class to the ones in index-edit.php, but rest of them (which are not index-edit.php) works fine.
Look at my script.js.
$( input ).focusout( function() {
$( this ).addClass('active');
});
$( document ).on( "click", ".btn", function() {
$('.edit-wrapper').load('index-edit.php');
});
Since the inputs are added dynamically, you need to use event delegation to register the event handler
// New way (jQuery 1.7+) - .on(events, selector, handler)
$(document).on('focusout', 'input', function(event) {
$(this).addClass('active');
});
Where are you loading script.js ? Try this :
$(document).ready(function(){
$( input ).focusout( function() {
$( this ).addClass('active');
});
$( document ).on( "click", ".btn", function() {
$('.edit-wrapper').load('index-edit.php');
});
});
need to use event delegation
$( document).on('focusout', 'input ', function() {
$( this ).addClass('active');
});