How do I bind 'click' to a paragraph?
I have the following function:
$(document).on('touchstart mousedown',"p span.text", function(e) {
console.log('I was clicked');
*more code here*
});
If I replace 'touchstart mousedown' with 'click', the function is no longer fired.
PS: I'm SUPER new to JS, so I might be doing something wrong.
Try:
$("p span.text").on('click', function(){
console.log('I was clicked');
});
How do I bind 'click' to a paragraph
Try to attach click event to your paragraph instead of span:
$(document).on('touchstart mousedown click',"p", function(e) {
console.log('I was clicked');
});
This also works:
According to your reply, updated
$(document).on('click',"p span", function(e) {
console.log('I was clicked');
});
Related
I'm trying to select a div for a click event but not the inputs within said div. I thought this would do it but it does not work. here is a demo. Thank you
html
<div id = "test"><input></div>
js
$('#test:not(input)').click(function(){
alert();
});
You could check to see if the clicked element is an input element using !$(e.target).is('input')
Updated Example
$('#test').on('click', function (e) {
var $target = $(e.target);
if (!$target.is('input')) {
alert('clicked');
}
});
When you click on the input, the click event bubbles to the div above it.
You can stop this by calling stopPropagation or stopImmediatePropagation on the event object.
http://jsfiddle.net/t66f06oL/1/
$( '#test' ).on( 'click', function() {
alert();
} );
$( '#test' ).on( 'click', 'input', function( e ) {
e.stopImmediatePropagation();
} );
When you click on the input control your click event is actually caught by the parent div. You can fix this by changing your code to this:
$('#test:not(input)').click(function(){
alert();
});
$('#test').find('input').click(function(e){
e.stopPropagation();
});
I have the following example structure:
<div class="modHolder">
<div id="wData">...</div>
</div>
I want something to happen if .modHolder is clicked but nothing to happen if #wData is clicked.
This is what I'm trying but #wData is still reacting to the click:
$(document).on('click', '.modHolder:not("#wData"), .modClose', function(e) {
...
}
Any ideas why?
Here's how to do it, use this for clicking .modHolder:
$(document).on('click', '.modHolder, .modClose', function(e) {
...
});
and then add this:
$(document).on('click', '#wData', function(e) {
e.stopPropagation();
});
This will stop the clickEvent to bubble up the DOM-tree.
Check it out here: JSFiddle
Your selector is wrong. Try replacing
'.modHolder:not("#wData")'
with
'.modHolder div:not("#wData")'
Here's a fiddle:
http://jsfiddle.net/muywo9qp/
It should rather be:
$(document).on('click', '.modHolder', function(e) { ... });
$(document).on('click', '#wData', function(e) {
e.stopImmediatePropagation();
});
$(document).on('click', '.modHolder', function(e) {
alert('Here');
});
$(document).on('click', '#wData', function(e) {
e.stopImmediatePropagation();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modHolder">
<div id="wData">.....</div>
<div class="modClose">X</div>
</div>
I have tried sooooo many different methods of this that others have suggested, but I don't understand what i'm doing wrong and really need some help. I have tried using various combinations of hover, mouseenter/mouseleave, on/off, bind/unbind.
Basically, I can get things to unbind, but I can't get them to bind again afterwards.
I put together a jsfiddle with a basic example. If you click the "Hover Off" button, mouseenter is disabled like intended. But then if you click the "Hover On" button after, mouseenter does not enable again.
http://jsfiddle.net/770b5p8q/3/
Here is "hover" functionality:
$('.square').each(function(){
$(this).bind("mouseenter", function(){
$(this).addClass('active');
});
$(this).bind("mouseleave", function(){
$(this).removeClass('active');
});
});
Here is what should enable/disable it:
$('.hover_enabled').click(function(){
$('.square').each(function(){
$(this).bind("mouseenter");
$(this).bind("mouseleave");
});
});
$('.hover_disabled').click(function(){
$('.square').each(function(){
$(this).unbind("mouseenter");
$(this).unbind("mouseleave");
});
});
You should pass the function for binding and unbinding the handlers, something like:
var mouseEnterHandler = function () {
$(this).addClass('active');
}
var mouseLeaveHandler = function () {
$(this).removeClass('active');
};
$('.square').bind("mouseenter", mouseEnterHandler)
.bind("mouseleave", mouseLeaveHandler);
$('.hover_enabled').click(function () {
$(this).addClass('active');
$('.hover_disabled').removeClass('active');
// I need to bind hover here
$('.square').bind("mouseenter", mouseEnterHandler)
.bind("mouseleave", mouseLeaveHandler);
});
But the code becomes ugly and unmaintainable. You can use event delegation instead:
$(document).on('mouseenter mouseleave', '.square.hoverable', function(event) {
// toggle the class by checking the type of the event
$(this).toggleClass('active', event.type === 'mouseenter');
});
// caching the state changers
var $e = $('.hover_enabled, .hover_disabled').click(function () {
var $this = $(this).addClass('active'),
isHoverable = $this.hasClass('hover_enabled');
// exclude the clicked element from the set and remove the class
$e.not($this).removeClass('active');
$('.square').toggleClass('hoverable', isHoverable);
});
The above mouseenter mouseleave handler is only executed when the .square element has hoverable className. You can also remove the event handler and use CSS for styling.
.square.hoverable:hover {
}
http://jsfiddle.net/bztec1f4/
Once you rebind it back you need to pass function as well.
$('.hover_enabled').click(function(){
$('.square').each(function(){
$(this).bind("mouseenter", function(){
$(this).addClass('active');
});
$(this).bind("mouseleave", function(){
$(this).removeClass('active');
});
});
});
Click on the document, the .area div disappears.
$(document).on('click', function() {
$('.area').hide();
});
$(document).off('click', '.red', function(e) {
e.stopPropagation();
});
In this case, how can I apply stopPropagation to .red. I'd like to keep this js format, as I will need to add more class names.
Online Sample http://jsfiddle.net/ku9cj/1/
Thanks
off() is used to remove the event handler; you need to use .on()
$(document).on('click', '.red', function(e) {
e.stopPropagation();
});
Demo: Fiddle
You should not attach handlers to the document, as they bubble up very slowly. If you must do so, try the following:
$('body').on('click', function() {
$('.area').hide();
});
$('.red').on('click', function(e) {
e.stopPropagation();
});
Or, if you insist on using a delegate and do not have a closer parent element:
$('body').on('click', '.red', function(e) {
e.stopPropagation();
});
In situations where multiple event handlers are operating on a single element and action, how can I force only one of the events to fire? JSFiddle.
$("#buttons").on("click", "button", function(){
// only do this if the event below isn't fired
});
$("#buttons").on("click", "button.red", function(){
// if this one happens, don't do the above one
});
For a more general solution, event.stopImmediatePropagation() will prevent the event from triggering any more handlers. For handlers bound to the same element, the order they are bound seems to matter. You could also bind the one that you conditionally don't want to fire to an element higher in the DOM and use e.stopPropagation():
$(document).ready(function(){
$("#buttons").on("click", ".red", function(e){
e.stopImmediatePropagation();
$(this).css("color","red");
});
$("#buttons").on("click", "button", function(){
$(this).css("background","blue");
});
});
http://jsfiddle.net/Ef5p7/
Here's how you could use stopPropagation() instead:
<div id="buttonsOuter">
<div id="buttons">
<button>turn blue</button>
<button class="red">only turn text red</button>
<button>turn blue</button>
<button>turn blue</button>
<button>turn blue</button>
</div>
</div>
...
$(document).ready(function () {
$("#buttons").on("click", ".red", function (e) {
e.stopPropagation();
$(this).css("color", "red");
});
$("#buttonsOuter").on("click", "button", function () {
$(this).css("background", "blue");
});
});
http://jsfiddle.net/CwUz3/
Change the first event handler to:
$("#buttons").on("click", "button", function(){
$(this).not('.red').css("background","blue");
});
jsFiddle example
$("#buttons").on("click", "button, button.red", function(){
// if this one happens, don't do the above one
});
Try using :not() http://api.jquery.com/not-selector/
$(document).ready(function(){
$("#buttons").on("click", "button:not(.red)", function(){
$(this).css("background","blue");
});
$("#buttons").on("click", "button.red", function(){
$(this).css("color","red");
});
});
Here's the working fiddle:
http://jsfiddle.net/SpFKp/4/
Try this,the functions will be called but you can add condition to not run the code:
var functionCalledFlag =false;
$("#buttons").on("click", "button", function(){
if(!functionCalledFlag ){
functionCalledFlag =true;
// only do this if the event below isn't fired
}else{
functionCalledFlag =false;
}
});
$("#buttons").on("click", "button.red", function(){
if(!functionCalledFlag ){
// only do this if the event above isn't fired
functionCalledFlag =true;
}else{
functionCalledFlag =false;
}
});