I'm trying to add custom "options" icon to the event. I want that if i click on this icon, small tooltip appears. But if i click on this icon, eventClick is triggered.
This is my html
<div class="fc-event-content">
<div class="fc-event-title" style="float: left">
<div class="title_info" id="prvni_radek">Text on row one</div>
<div class="title_info">Text on row two</div>
</div>
<div class="tecky"><img src="./image/tecky.png"></div>
</div>
I tried this JS
<script>
$(".tecky").on("click", function(event){
event.stopPropagation();
alert("test");
});
</script>
event.stopPropagation(); i found in this article but it won't help
Try use event.preventDefault(). It should help you.
if event.stopPropagation() does not work, give the below a try
$( '#outer' ).click ( function ( event ) {
if ( $( event.target ).is( '#inner' ) ) {
//code if inner got clicked
} else {
//code if outer got clicked
}
}
Related
I am trying to create a jquery to click a hyperlink but nothing seems to be working.
HTML
<main id="main" class="main-content">
<div class="container">
<div class="warning" role="alert">
no avail
Show all
</div>
what I was trying
$(".warning a").click()
Any suggestions?
Note that jQuery-initiated "click" events will fire the event but will not cause navigation to occur.
Instead you can read the link's HREF attribute and directly set the window location:
// The click event:
$('a').on("click", function() {
console.log("Click event fired");
})
var demo1 = function() {
// This will trigger the click event, but will not navigate.
$(".warning a").click()
}
var demo2 = function() {
// This will navigate but will not trigger the click event. (If you need both to happen, trigger the click event first, and consider delaying the window location update if necessary.)
var url = $(".warning a").attr("href")
window.location = url;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main id="main" class="main-content">
<div class="container">
<div class="warning" role="alert">
Show all
</div>
</div>
</main>
<!-- for demo: -->
<button onclick="demo1()">Won't work</button>
<button onclick="demo2()">Will work</button>
jQuery's .click() (without arguments) is a shortcut for .trigger("click"):
function(a,c) {
return arguments.length > 0 ? this.on(b, null, a, c) : this.trigger(b)
}
Therefore, it will not actually click the element, but just call the click event handlers attached to it, as you can see here:
const $link = $("a");
$link.on("click", () => {
console.log("Clicked? Not really...");
});
$link.click();
$link.trigger("click");
Show all
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You need to get a reference to the actual DOM element and then call HTMLElement.click() on that:
$("a")[0].click();
Show all
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You can user the vanilla click method:
document.querySelector('.warning > a').click()
// equivalent jquery
//$('.warning > a')[0].click()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="warning" role="alert">
no avail
Show all
</div>
Whenever you select div class with hyperlink there you get array because you can have multiple hyperlinks so you need to add somthing like below
Code
$('.warning a')[0].click();
For reference link
Get working example for click event
If I need to redirect, I typically use window.location.href
window.location.href=$(".warning a").attr('href');
I am having a structure like
<div onclick="first()">
//first div
<div onclick="second()">
//second div
<div onclick="third()">
//my content here inner div
</div>
</div>
</div>
when I am clicking on any div it's calling the first function. How to achieve the situation that only the div I clicked then the corresponding function is called. I am new to javascript.
Since your DIVs are nested inside each other, the click event will bubble out to each element. If you only want it to be on the inner DIV that you click on, you need to call event.stopPropagation() to stop the bubbling. This means you have to pass the event object to the functions.
<div onclick="first(event)">
//first div
<div onclick="second(event)">
//second div
<div onclick="third(event)">
//my content here inner div
</div>
</div>
</div>
Then the functions have to be like:
function first(e) {
e.stopPropagation();
// rest of code here
}
You can use event.stopPropagation() to stop the click event from bubbling up.
function first(){
this.event.stopPropagation();
alert( 'first div' );
}
function second(){
this.event.stopPropagation();
alert( 'second div' );
}
function third(){
this.event.stopPropagation();
alert( 'third div' );
}
<div onclick="first()">
//first div
<div onclick="second()">
//second div
<div onclick="third()">
//my content here inner div
</div>
</div>
</div>
Try Event.stopPropagation() which prevents further propagation of the current event in the capturing and bubbling phases.
function first(e){
e.stopPropagation();
alert('first function')
}
function second(e){
e.stopPropagation();
alert('second function')
}
function third(e){
e.stopPropagation();
alert('third function')
}
<div onclick="first(event)">
first div
<div onclick="second(event)">
second div
<div onclick="third(event)">
my content here inner div
</div>
</div>
</div>
The problem is that clicking on a child div, it triggers every parents of this div (clicking on third will triggered second which will trigger first).To prevent the propagation you need to stopPropagation like this
See onclick documentation
function first(e){
e.stopPropagation();
console.log('you are in first')
}
function second(e){
e.stopPropagation();
console.log('you are in second')
}
function third(e){
e.stopPropagation();
console.log('you are in third')
}
<div onclick="first(event)">
//first div
<div onclick="second(event)">
//second div
<div onclick="third(event)">
//my content here inner div
</div>
</div>
</div>
So I have nested DIVs and a simple version can be shown like this:
$('#parent').click(function() {
$('.parent').modal('show');
});
$('#child').click(function() {
$('.parent').modal('hide'); // Added to try and hide
$('.child').modal('show');
$('.parent').modal('hide'); // Added to try and hide
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
<div id="child">
</div>
</div>
The thing is when I click on the child div, the parent dialog also shows up behind the child dialog.
Any way to get around this?
It is happending because your child click event is bubbling up to the parent. Use e.stopPropogation() for the child div. This will prevent your click event from propogating to the parent.
$('#parent').click(function() {
$('.parent').modal('show');
});
$('#child').click(function(e) {
e.stopPropogation();
$('.parent').modal('hide'); // Added to try and hide
$('.child').modal('show');
$('.parent').modal('hide'); // Added to try and hide
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
<div id="child">
</div>
</div>
You can deal with such cases easily by mentioning the target in an attribute like below.
$('#parent, #child').click(function() {
var target = $(this).data('target');
$('.'+target).modal('show');
// write code to hide others if necessary
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent" data-target="parent">
<div id="child" data-target="child">
</div>
</div>
Try this before showing the modal:
$( '.modal' ).remove();
$( '.child' ).modal('show');
Remove the modal before using show. Hope this will fix your issue
I have the following markup:
<div data-href="http://www.xxxxxxxxxxxxx.com/xxxxxxxx.php/Mediterranean-Youth-Hostel/Barcelona/6053" data-id="6053" class="property-wrapper row">
<div class="columns large-4 medium-4">v
<img class="recent-viewed-img" src="http://ucd.xxxxxxxxx.com/propertyimages/6/6053/107.jpg" alt="">
</div>
<div class="columns large-8 medium-8">
<div class="info">
<span class="city">Barcelona</span>
<span class="close right">x</span>
</div>
<span class="hostel-title">Mediterranean Youth Hostel</span>
<div class="rating">
<span class="number">9.1</span>
<span class="text">Fabulous</span>
</div>
<div class="bottom-info">
<span class="price-from">From €9.90</span>
<div class="icon_freewifi right">
<i class="fa fa-wifi"></i>Free WiFi
</div>
</div>
</div>
</div>
and 2 js function with 2 different click events as follow:
this one allows you to click the all row and take you to anoter page:
$('.property-wrapper .columns').on('click', function(){
window.location.href = $(this).parent().data('href');
});
this one simply closes and removes the row you just clicked on:
$('body').on('click', '.close.right', function(){
$(this).parent().parent().parent().fadeOut(200, function(){
CRO_106_removePropertyFromCookie($(this));
CRO_106_hideOverlayIfNoPropertiesLeft();
});
});
the problem is that when on .close.right it also goes to the other page.
The 2 click events are conflicting.
I can edit the markup, I have tried to have an "a" wrapper around but that didnt work either..
You need to check the event.target inside of the click handler bound to .property-wrapper .columns, and if it's .close.right, you can prevent the redirect from occurring:
$( '.property-wrapper .columns' ).on( 'click', function( evt ) {
if ( $( evt.target ).is( '.close.right' ) ) {
return true;
}
window.location.href = $( this ).parent().data( 'href' );
} );
You can't use event.stopPropagation() in the handler bound to the body because the above click handler would have already fired, and the redirect already occurred.
Here's a fiddle which demonstrates this and here's a fiddle with the proposed solution
I have a dropdown menu activated on click.
I use toggle to activate it when you click on the .hello_panel
HTML
<div class="container">
<div class="login_panel">
<div class="hello_panel">
<div class="hello_label">Hello </div>
<div class="hello_value">foofoo</div>
</div>
</div>
</div>
jQuery
$('.hello_panel').bind('click', function(){
$('.menu_popup').toggle();
})
if I click it it works fine, it does the show and hide effect when the .hello_panel
is clicked.
what I want is it to be shown if the .hello_panel is clicked and hidden back if when clicking anything else on the page except the .menu_popup
You can hide it whenever you click on the document
JavaScript
$(document).click(function () {
$('.menu_popup:visible').hide();
});
$('.hello_panel').bind('click', function (e) {
$('.menu_popup').toggle();
e.stopPropagation();
});
HTML
<div class="container">
<div class="login_panel">
<div class="hello_panel">
<div class="hello_label">Hello</div>
<div class="hello_value">foofoo</div>
</div>
</div>
</div>
<div style="display:none" class="menu_popup">menu_popup</div>
Demo
http://jsfiddle.net/6bo1rjrt/16/
Another way if you don't want to stopPropagation is passing a call back function that registers a once time click listener to that document to hide the menu
$('.hello_panel').bind('click', function () {
$('.menu_popup').show(function () {
$(document).one('click', function () {
$('.menu_popup:visible').hide();
});
});
});
Demo
http://jsfiddle.net/6bo1rjrt/17/