Is there a way to target the img showed in lightgallery.js slider ?
This JS below has 3 fails to get a simple console.log(); :
var $lg = $('#mosaic');
$lg.lightGallery({thumbnail: false, addClass: 'imgGallery'});
$('.imgGallery img').click(function() {
console.log('click'); // fail
});
$('img.lg-object.lg-image').click(function() {
console.log('click'); // fail
});
$('div.lg-img-wrap img').click(function() {
console.log('click'); // fail
});
JSFIDDLE
The img elements that have the click event aren't inside the .imgGallery div. They're actually inside of #mosaic. If you change that selector to $('#mosaic img') you're all set for that one.
As for the other two, those elements are created dynamically, so they don't exist at the time you're trying to bind the click events. What you want is click delegation, so that you're binding the click event to an outer element, but intercepting it on a child. So create a wrapper around everything (or if not possible, bind to the body)
$('body').click('img.lg-object.lg-image', function(e) {
console.log('click'); // success
console.log(this); // body (element to which the event is bound)
console.log(e.target); // img.lg-object.lg-image (element that received the click)
});
Related
I'm using a hidden input to keybind my app with it but without triggering events when i write on other input-fields
-clicks on element {
-hide element
-creates an input text-field(to edit the element)
-focus the input
- on blur or submit changes the element and remove the input
}
but if you add this new event :
- click anywhere in the container {
-focus the hidden app input (so it can use keybinding)
}
when user clicks on the element it ends firing the blur event without letting the user edit it first because its activating the second block event.
so it's either skipping the focus part of the first block
or the focus of the second block is activating after the focus on the first one
I'm maybe using the wrong approach to solving it
but I don't know why it's behaving that way.
actual code:
$("#hiddenInput").focus()
var elem = $("#nameClip");
function evenConditional(id) {
if ($(id).val() !== "") {
elem.text($(id).val())
storedObj.name = $(id).val();
}
$(id).parent().remove();
elem.show();
}
$("#name").on("click", function() {
elem.hide();
elem.after(
$("<form/>").append(
$("<input/>").addClass("rename")
)
);
$(".rename").focus();
});
$(".rename").blur(function() {
evenConditional(this);
});
$(".rename").closest("form").on("submit", function(e) {
e.preventDefault();
evenConditional(this);
});
/// regaining focus on click
$(".container").on("click", function(e) {
$("#hiddenInput").focus()
});
css:
#hiddenInput {
position:absolute;
top: -2000;
}
Since the #name element is in the .container element, when you click on it, the click event bubbles up to the container, causing the click-event handler for the container to get executed.
One way to fix this would be to stop the click event from bubbling:
$("#name").on("click", function(e) {
e.stopPropagation();
There can be side effects from doing that though. Particularly, there may be other event handlers that will not get executed because of that. Such as handlers that close opened menus.
The other option would be to place conditional logic in the click handler for the container so it does not execute if the click originated with the name element.
$(".container").on("click", function(e) {
var nameElement = $("#name")[0];
if ((e.target != nameElement) and !$.contains(nameElement , e.target)) {
$("#hiddenInput").focus();
}
});
How can I turn an on('click') event back on after I apply event off()?
$('#btn-aluno').on('click', function() {
$('.new-step-email-aluno').toggle();
$('#btn-familiar').off();
});
$('#btn-familiar').on('click', function() {
$('.new-step-email-familiar').toggle();
$('#btn-aluno').off();
});
new-step-email-familiar and new-step-email-aluno = <input>
btn-aluno and btn-familiar = <span> (used as a button)
Instead of turning off the event listener, you could do the same thing by using event delegation,
$(document).on('click',"#btn-aluno.active", function() {
$('.new-step-email-aluno').toggle();
$('#btn-familiar').removeClass("active");
});
$(document).on('click',"#btn-familiar.active", function() {
$('.new-step-email-familiar').toggle();
$('#btn-aluno').removeClass("active");
});
And whenever you want to activate the event listeners, just add the class active to the relevant elements. Also in the place of document try to use any closest static parent of the element on which the event gonna be bound.
As per your requirement, you have edit your logic like below,
$(document).on('click',"#btn-aluno.active", function() {
$('.new-step-email-aluno').toggle();
$('#btn-familiar').toggleClass("active");
});
$(document).on('click',"#btn-familiar.active", function() {
$('.new-step-email-familiar').toggle();
$('#btn-aluno').toggleClass("active");
});
DEMO
I have simple slider which I open/close on click event.
$('#tab1-slideout span').click(function () {
manageToggleStateTab1();
});
function manageToggleStateTab1() {
if (tab1ToggleState == 'collapsed') {
$('#tab1-content').slideToggle('slow');
$('#tab1-slideout span').addClass('active');
tab1ToggleState = 'expanded';
});
and on page load I set this tab1ToggleState with initial value
var tab1ToggleState = 'collapsed';
this works great but I want to expand this further in order to allow toggling state on click event anywhere outside #tab1-content container div.
I tried to wire click event anywhere on page except the one with toggle content
$(document).not($('#tab1-content')).click(function () {
manageToggleStateTab1();
});
but this not gives me desired result, div immediately slide down after it slide up.
you can use this function
// hide some divs when click on window
function actionwindowclick(e , el , action){
if (!$(el).is(e.target) // if the target of the click isn't the container...
&& $(el).has(e.target).length === 0) // ... nor a descendant of the container
{
action();
}
}
in click event
$(document).click(function (e) {
actionwindowclick(e , '#tab1-content' , function(){
// do action here
});
});
simply this function says if the element is not a target do the action
Working Demo
and while you use $(document).click(... you will need event.stopPropagation()
so for example
$('#tab1-slideout span').click(function (event) {
event.stopPropagation();
manageToggleStateTab1();
});
Working Example
A variety of elements on my page have the content editable tag.
When they are clicked I do this:
$('[contenteditable]').on('click', this.edit);
p.edit = function(e) {
console.log(e.currentTarget);
e.currentTarget.on('keydown', function() {
alert("keydown...");
});
};
I get the current target ok, but when I try to add keydown to it, I get the err:
Uncaught TypeError: undefined is not a function
It's a native DOM element, you'll have to wrap it in jQuery
$(e.currentTarget).on('keydown', function() {
alert("keydown...");
});
e.currentTarget should equal this inside the event handler, which is more commonly used ?
It's a little hard to tell how this works, but I think I would do something like
$('[contenteditable]').on({
click : function() {
$(this).data('clicked', true);
},
keydown: function() {
if ($(this).data('clicked'))
alert("keydown...");
}
});
Demo
First issue is you are trying to use jQuery methods on a DOM element. Second issue is I do not think you want to bind what is clicked on, but the content editable element itself.
It also seems weird to be adding the event on click instead of a global listener. But this is the basic idea
$(this) //current content editable element
.off("keydown.cust") //remove any events that may have been added before
.on('keydown.cust', function(e) { //add new event listener [namespaced]
console.log("keydown"); //log it was pressed
});
Edited: I had a fail in code. It works fine now.
Getting your code, I improved to this one:
$(function(){
$('[contenteditable]').on('click', function(){
p.edit($(this));
});
});
var p = {
edit: function($e) {
console.log($e);
$e.on('keydown', function() {
console.log($(this));
alert("keydown...");
});
}
}
You can check it at jsFiddle
You need to wrap the e.currentTarget(which is a native DOM element) in jQuery since "on" event is a jQuery event:
$(e.currentTarget).on('keydown', function() {
alert("keydown...");
});
EDIT:
$('[contenteditable]').on('click', p.edit);
p.edit = function(e) {
$(e.currentTarget).on('keydown', function() {
alert("keydown...");
});
};
You're defining p.edit AFTER $('[contenteditable]').on('click', p.edit); resulting in an error since p.edit doesn't exist when declaring the on.
In case you don't know, you are defining p.edit as a function expression, meaning that you have to define it BEFORE calling it.
I am working with this plugin that runs off of the data attribute. Basically when you click anywhere on the body it will determine if the click target has this specific data-vzpop. The problem is lets say I have a div and inside the div is an a href. It only acknowledges the a href as the click target and not the div (which makes sense).
What I want to try and do in some cases is put the data attribute on the containing div that way anything within the div works on click.
Here is a sample of the issue with jsfiddle it requires viewing the console so you can actually see which element is registered as being clicked.
<div data-vzpop>
Click Me
</div>
$('body').on('click', function(evt){
var clickTarget = evt.target;
if ($(clickTarget).attr('data-vzpop') !== undefined){
evt.preventDefault();
console.log('called correctly')
} else {
console.log('not called correctly')
}
console.log(clickTarget)
});
fiddle
You would use Event delegation:
$('body').on('click', '[data-vzpop]', function(evt) {
This will only trigger when the evt.target has a data attribute of data-vzpop, no matter the value.
If you want items inside the [data-vzpop] to trigger it as well, you would use your original click event but check that the $(clickTarget).closest('[data-vzpop]').length > 0 to determine if it's a nested target.
$('body').on('click', function(evt){
var clickTarget = evt.target;
if ($(clickTarget).attr('data-vzpop') != null ||
$(clickTarget).closest('[data-vzpop]').length > 0){
evt.preventDefault();
console.log('called correctly')
} else {
console.log('not called correctly')
}
console.log(clickTarget)
});