I am having a mare with Bootstraps buttons in a modal popover. Whatever I do I cannot get the click event to fire. Latest Bootstrap, jQuery 1.7.1.
Inside the modal I have a footer with buttons
<div class="modal-footer">
Cancel
Don't Save
</div>
And my JS that is not working (click is never fired)
$("#navigate-away .cancelBtn").on("click", function(event){
console.log('Click.');
$('#navigate-away').modal('hide');
});
I can prove it works by using hover instead of click (hover fires ok)
$("#navigate-away .cancelBtn").on("hover", function(event){
console.log('Click.');
$('#navigate-away').modal('hide');
});
It seems the click event is being swallowed internally? I see all over SO people using this exact method with no problems. What simple thing am I missing?
This did indeed to turn out to be a conflict with another library. It was a shocker to debug, I ended up getting it relatively simply using Allan Jardine's Visual Event bookmarklet at http://www.sprymedia.co.uk/article/Visual+Event . Thanks Allan you saved my baconator.
Try adding preventDefault to your click event, and changing to use the delegate style of binding:
$("#navigate-away").on("click", ".cancelBtn", function(event){
event.preventDefault();
console.log('Click.');
$('#navigate-away').modal('hide');
});
Related
I am having the following issue with click/touchstart event on Android (as far as I know only happening on Android),
1. the element triggers a modal window.
2. one of the buttons/links inside this modal gets triggered instantly without giving the user the option to make a choice.
It is of course required for the visitor/user to view the modal content before being redirected to a link to another page from one of those buttons.
I believe this is due to the 'touchstart' event bind to this div, which I am using since click events on divs for touch devices don't work.
I am using jQuery to make this work, and on iOS there doesn't seem to appear any issue.
$(document).on('click touchstart','.mydiv', function(e) {
e.preventDefault();
// open modal
});
Any suggestions please.
Try this:
$(.mydiv).on('touchstart', function(e) {
e.preventDefault();
// open modal
});
cheers
So, i have this code snippet that opens a modal:
<button id="trigger-overlay" class="order">Open Overlay</button>
Now, i wanted to include it in Wordpress menu, but i cant add button tag there, so i added:
Open Overlay
And i am using jquery to add a ID to that link, like this:
$('.order').attr('id','trigger-overlay');
ID is added, but link doesnt open anything, aka, it links to "#" instead of opening a modal...
How could i fix this to make it work?
Thanks!
This thing may causing due to events binging order. So, your code $('.order').attr('id','trigger-overlay'); is executing right after click's binding event (I think that event looks like this one: $('#trigger-overlay').click(function() { ... });.
If you have ability to change that binding, please use jquery.on method: http://api.jquery.com/on/
So that code will looks like: $(document).on('click', '#trigger-overlay', function() { ... });.
Also you can just move $('.order').attr('id','trigger-overlay'); above the script with that event binding.
Based on your
<button id="trigger-overlay" class="order>Open Overlay</button>
I'm not sure how you got a modal to trigger, since it is not connected to an event handler like:
<button onclick="turnOverlayOn()">Demo Button</button>
In this case, there would be a function that targets the overlay/modal and turns its CSS display property from none to block or inline-block (however you would like to display it):
var turnOverlayOn = function () {
$('targetOverlayId').css('display','block')
}
I suggest focusing on attaching an onClick event that triggers a function that does what you want to make the overlay appear.
The function used to turn the overlay off could be:
var turnOverlayOff = function () {
$('targetOverlayId').css('display','none')
}
You could attach this to a different anchor tag or button to turn the overlay off.
Note: the event should work the same for an anchor tag as it does for a button.
In my understanding you want to trigger the button click event. Using the a tag with class order.
try
jQuery(document).on('click','.order',function(){
jQuery('#trigger-overlay').click();
});
You can trigger the click event using jquery. Since I have no knowledge of your DOM structure jQuery(document).on('click','.order',function().. will work even if your elements are dynamic (added to the DOM after the script execution) because the click event is bind to the document.
NOTE:
When using wordpress always use jQuery instead of $ to avoid conflicts.
I have a listener on a group of elements:
$('a.menu__link').on('click',function() {alert('function was triggered');});
One element of which is:
<a class="menu__link menu__link--submenu Main" id="Events" href="#">Events</a>
I want to manually trigger a click on the element. Using Chrome dev tools, the event handler is:
a#Events.menu__link.menu__link--submenu.Main
However, the following code does not trigger the listener:
$('a#Events.menu__link.menu__link--submenu.Main').trigger('click');
I have tried every variation that I can think of, but I cannot find the correct reference to trigger the alert function.
What am I doing wrong?
You can use instead click instead of trigger like this to trigger a click :
$('#div').click();
Read more about click here
Here is a JsFiddle
I encased the trigger in a $(document).ready(function()) and that fixed it.
Kudos to Blazemonger for implying that it was a timing issue.
<script>$(document).ready(function() {
$('#Events').trigger('click');
$('#PastSeminars').addClass('menu__link--current');
});</script></body></html>
The lesson? Just because it is the last thing on the page, when in doubt, use document.ready.
Chrome blocks the click event from being programmatically fired. I'd come up with a new solution such as just calling the needed function wherever you need to trigger it.
You can read more about it here: https://teamtreehouse.com/community/why-does-my-onclick-event-not-fire-on-chrome
Using dot.js I'm adding a button to a specific web page that, when clicked, should add some text to a text field and then trigger another button to also be clicked. I simulate this by adding a click handler to my button which has this code:
var button = $('.some-class').find('button')[0];
console.log(button); // element I expect
button.click();
However, this doesn't work and I'm not sure why. If instead of .click() I perform .remove(), the button is removed from the page. If I use the console to execute the same code, the button does get clicked. This tells me I do have the right element, but there is something wrong with the click() event specifically.
Can someone explain why this isn't working in either Safari or Chrome? I've tried a lot of different things, but I'm new to jQuery so I'm probably missing some detail in how that works.
We went to the bottom of this in the chat. What probably caused the problem was another event-handler attached to (possibly) body, that undid the click.
So the solution was to stop the event from propagating:
event.stopPropagation();
While assigning the click event handler to the button you should use jquery on
This should ensure that whenever a new button with added with same selector (as in when event was assigned), event handled will be assigned to that button
Some examples here
The problem is the click() function is from jquery and you're attempting to fire the click function from the DOM object.
Try
$(button).click();
Here's a plunk.
http://plnkr.co/edit/2pcgVt
You can use the following statement.
var button = $('.some-class').find('button')[0].trigger('click');
try jquery's trigger() function:
$(button).trigger('click');
see jsfiddle: https://jsfiddle.net/665hjqwk/
I want to use Tooltipster plugin which click an element in the body to show the tooltip and I want to have a close button inside the tooltip to close it.
However I use Jquery click() function to handle it but it won't fired.
I tried the solution in this post. It worked only when the tooltip is triggered by hover event.
Tooltipster plugin not firing jquery function when link in in the tooltip is clicked
The original solution using hover in jsfiddle
trigger: 'hover',
Instead using click to show the tooltip
trigger: 'click',
http://jsfiddle.net/bCqyL/7/
It won't fire any click event in jquery block. It can captured by a normal javascript function only.
I checked it should be some code in the Tooltipster plugin locked and captured all "click()" event inside the tips when in click trigger mode.
I tried other event like onchange event of radio button is fired when using the code in original solution
#Evan is right. Your Tooltip doesn't exist in the DOM and you can't bind/delegate any action to it (even if you go all the way back to $(document) after DOMReady).
If you're after a close button inside of the Tooltip try the following code, it's worked for me (and JSFiddle!):
JavaScript
$('.tooltip').tooltipster({
// Required, but have a fiddle around
'interactive': true,
'contentAsHTML': true,
'autoClose': true,
'trigger': 'click',
'onlyOne': true,
// ...
// The coup de grâce ...
'functionReady': function(){
$('.tooltipster-default .close').on('click', function(e){
e.preventDefault();
$('body').click();
});
}
});
HTML
<span class="tooltip" title="<h3>Title <a title='Close' href='#' class='close'></a></h3><p>This is my tooltip content!">I have a tooltip!</span>
The JSFiddle
http://jsfiddle.net/hpKST/1/
Why it works
The combination of autoClose and trigger help in closing the Tooltip whenever a person clicks outside the interactive Tooltip. The functionReady callback allows you to bind a function to take advantage of this and delegate a function to click the body while the Tooltipster is open, thus closing the Tooltip.
I hope this helps! :)
That's because the HTML does not exist in the DOM when you try to bind your function.
Insert your content as jQuery object instead and make your bindings on it.
Edit : my answer is wrong, because the user has a delegated handler, I missed that. I give the right answer here : https://github.com/iamceege/tooltipster/issues/145