This question already has answers here:
Emulate jQuery "on" with selector in pure Javascript
(4 answers)
Closed 1 year ago.
At the moment the only thing, which makes me load ~100kb jQuery library are these 3 lines of code:
$(document).on('click', ".js-ya-share2-button", function() {
this.parentElement.querySelector('.ya-share2__item_more').click();
});
How to reproduce the full functionality of without jQuery?
The code above allows to "attach" a function to elements, which hasn't been loaded yet. For example, to elements, which are loaded only when user scrolls the page down.
How to make it with pure JavaScript?
This imo would be the exact analogy in vanilla JS:
document.addEventListener('click', function(event) {
const desiredTargetElement = event.target.closest('.js-ya-share2-button');
if (desiredTargetElement)
desiredTargetElement.parentElement.querySelector('.ya-share2__item_more').click();
});
The reason we need to work with closest here rather than checking if the event target has the desired class is that you can have scenarios where the clicked element is actually a descendant of the element you're looking out for.
closest(selector), if called on the element that already matches the desired selector, will return the element itself.
Related
This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 4 years ago.
I am implementing a simple website which has a toggle sidebar. I want to make the sidebar be hidden when I clicked somewhere on the page except the sidebar. So I think that I should get all elements on the page except a element that has sidebar class. Is there any way to do like that with plain javascript? JQuery has :not() select for this, but I'm trying to not using JQuery... :(
JQuery has :not() select for this
It's actually CSS, although jQuery extends it to allow all selectors (CSS's :not only allows a simple selector within the :not). Yours is a simple selector, so you can use :not:
var list = document.querySelectorAll(":not(.sidebar)");
However:
I want to make the sidebar be hidden when I clicked somewhere on the page except the sidebar.
I wouldn't implement this by setting an event handler on every element. Instead, I'd set a handler on document and then check to see if the event passed through the sidebar on the way to the document, e.g:
document.addEventListener("click", function(e) {
if (e.target.closest(".sidebar")) {
return; // The click passed through the sidebar
}
// close the sidebar
});
That uses Element#closest, which is present on all modern browsers and can be polyfilled for obsolete ones.
This question already has answers here:
$(document) vs. $("document")
(4 answers)
Closed 9 years ago.
Pretty much what the title says. Is one of the two better? $(document) or $('document').
It seems to me that if you use it quoteless it gets the dom object and with quotes it makes a new object, which makes it jQuery's responsibility. Right?
There is no better one - it's just whatever is correct.
$(document) is a jQuery object that represents the DOM.
$("document") is a jQuery object that represents DOM elements of type document, which there shouldn't be any as it's not a valid element.
You can find your answer in Stackoverflow :) Check this out: $(document) vs. $("document")
But if you cant be bothered clicking the link:
$('document') will make jquery find the document element. But no such element exists - just the root DOCUMENT. jQuery will do more work to resolve this compared to the global document object.
You have to use it without the quotes as it is the correct way to get the jQuery document object.
$(document).length returns 1.
The one with quotes actually try to get a html element called document, which does not exists in a usual HTML document.
$('document').length returns 0.
This question already has answers here:
Add click function to dynamically created html tags
(5 answers)
Closed 8 years ago.
I am trying to implement a click function inside a div with some nested children tags such as span, td, etc. However, these nested tags are loaded dynamically, mostly using ajax(). The returned result is displayed using .html(data) function. However, once the data is changed and new tags are added, the old javascript written to detect the clicks no longer work.
I want to know if there is a way to make this work?
An example of what i am talking about can be found here.
You are supposed to attach the event handler on the wrapper element like so:
http://jsfiddle.net/V4Sfw/1/
$("#testing").on("click", "span", function() {
alert("now?");
});
$("#testing").html("<span>How about now?</span>");
You could use live to attach handlers that always work, as long you know the structure of the loaded HTML.
This question already has answers here:
How do I find out which DOM element has the focus?
(20 answers)
Closed 8 years ago.
I am building a page with various anchors and form-elements that can be focused and I am wondering how I can get the element that is being focused on currently if something is being focused. I think one way to do it in jQuery is with .is(:focus). I'm looking for either a jQuery or vanilla js solution— just something that works.
Here is what I am trying to do in psuedo-code:
if (something is focused){
get the tag name of that which is currently focused and store that in a variable as a string.
}
else {
alert("nothing is being focused on");
}
Also, if you could answer this question, please do:
Isn't something always focused? Meaning it is the document / body that is focused when no specific elements are or is nothing focused until done so by the code or user?
You can either set a list of elements you care about focus on, or use a wildcard selector:
$(function () {
var focusedEls = [];
$('*:visible').bind('focus', function (e) {
focusedEls.push(e.target);
console.log( $.unique(focusedEls) );
});
});
Fiddle: http://jsfiddle.net/xfwy2/
There are a number of ways to store the elements that were focused, I just chose an array. Also, I'm not sure if you want to keep track of the times each element was focused, but if you do, just ditch the $.unique() for the full list.
Assuming you want to do this with jQuery, you are looking for is the jQuery .prop() method. $(someElement).prop('tagName') will return the tag name of someElement.
Just threw this together, as an example: http://jsfiddle.net/kZbYv/1/
You could use the following:
$('*:focus')
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Is there a jQuery DOM change listener?
Event when element added to page
Is there a jQuery event for when elements are added to the document?
Edits
OK, wait a minute! Geesh! I'm using knockoutjs and it dynamically adds elements. And I have to add something like the following to my text boxes:
$(document).ready(function () {
ko.applyBindings(new EditCatalogViewModel());
});
Further Edits
I guess my question will just have to go unanswered. Thanks SOOO much.
No there is not, if you look at the list of jQuery events, it's not listed. However, you can create your own listener and event if you know ahead of time where the element will be added.