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();
});
Related
I am creating drag and drop thing. When drop happens I create new runtime html and want to bind it event, so I have used following .on
.on ( "event", "selector", function() {
but its not working. Here is Snippet :
$( "#wrap .dragImages" ).on( "click", "button.edit-new-modal", function() {
var photoId = $(this).attr('data-username');
alert(photoId);
});
.on works before drag and drop. But afterwords nothing happens on clicking "button.edit-new-modal"!! What's wrong? Any solution?
try :
$(document.body).on( "click", "button.edit-new-modal", function() {
var photoId = $(this).attr('data-username');
alert(photoId);
});
This
$( "#wrap .dragImages" ).on( "click", "button.edit-new-modal", function() {
should be :
$(document).on( "click", "button.edit-new-modal", function() {
When you wire up event handlers, they are bound to the existing HTML elements only.
As and when you insert dynamic HTML, you must wire up these handlers again.
In your case, you can wrap the event handler setup in a function like this :
function wireUpHandlers() {
$( "#wrap .dragImages" ).on( "click", "button.edit-new-modal", function() {
var photoId = $(this).attr('data-username');
alert(photoId);
});
}
Call this method in your document.ready and then call this method again, after you have appened your dynamic HTML to the page
This is dynamic generated HTML so it will not work. Try using below code snippet
$(document).on( "click", "button.edit-new-modal", function() {
var photoId = $(this).attr('data-username');
alert(photoId);
});
I using jquery slidetoggle to show a DIV
but I need set if mouse click not in div.list go close this slideToggle
$( "#list_button" ).click(function() {
$( ".list" ).slideToggle( "fast" );
});
I only found if mouseout.... I cant find how to set if click any "anywhere on the page" to close this toggle
for testing : http://jsfiddle.net/sdgwbyv8/
$( "body" ).click(function( event ) {
if(
event.target.className!='list' && event.target.parentNode.parentNode.className!="list"
) {
$( ".list" ).slideToggle('fast');
}
});
Demo: http://jsfiddle.net/sdgwbyv8/9/ One possible solution, i guess there are better ones....
You can do it by event.stopPropagation():
$("#list_button").click(function (event) {
if ($(".list").is(":hidden")) {
event.stopPropagation();
$(".list").slideToggle("fast");
}
});
$('body').click(function () {
$(".list").hide();
});
$(".list").click(function (event) {
event.stopPropagation();
});
Working Fiddle
I need to track if an element and if ye which element is changed in a form.
The $( "input" ).change(function () { handler is not firing in Kendo UI. My code is
$( "input" ).change(function () {
alert('aaaa');
event.preventDefault();
});
what am I doing wrong? Or is there a more proper way in kendo?
I think you are looking for keyup event.
$("input").keyup(function () {
alert('aaaa');
});
Demo
Change event for input only fires when focus is lost after changing value. See this
Give your input (for example #target) and them:
jQuery( ".target" ).change(function() {
alert( "aaaaa" );
});
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');
});
I would like an event to fire whenever something other than a DOM element is clicked, and a separate event when an image is clicked.
Right now I have:
$( document ).click( function() { /*do whatev*/ } );
and in another place:
$( "img" ).click( function( e ) {
e.stopPropagation();
/*do whatev*/
} );
it does not work. both events are fired. any other ideas?
Simple and concise:
jQuery(document).click(function(event) {
if (jQuery(event.target).is('img'))
{
alert('img');
}
else
{
// Reject event
return false;
}
});
If the user clicks on an img element 'img' is alerted, otherwise the click event is stopped.
something like this:
$('*').click(function(ev) {
ev.stopPropagation();
if ($(this).is('img')) alert('img');
else if($(this).is('div')) alert('div');
else alert('something else');
});
http://www.jsfiddle.net/U2Szn/ ?
This should work, but just img isn't enough. It could be triggering from the img container. I think you'd need a selector like $('p,div,img,a,input,textarea,span,ul,ol,dl,li,dd,dt,table,tr,td') and any other tag you can think of to pull it off. This might have performance issues.
If you want an event to fire when the html and/or body is clicked or an img is clicked something like this should work: Live Example
$(document).click(function(e) {
if($(e.target).is('html')){
alert('this is the html element');
}else if($(e.target).is('body')){
alert('this is the body element');
}
});
$("img").click(function(e) {
e.stopPropagation();
alert('img')
});