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.
Related
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.
I am trying to re-write some jquery so that uses a selector I had previously created, so that it doesn't need to access the DOM again. The selector I had created already access the DOM once, and I want to use its contents in a string literal in a function.
My current code is the following:
$(this.$content[$(`.nav a[href$="${window.location.hash}"]`).parent().index()]).show();
which works just fine, but ".nav a" is accessing the DOM, which I do not want in this instance. I want to use this.$navigation, which I had created before and already has the information from the DOM. I tried writing it as
$(this.$content[$(`this.$navigation.find('a')[href$="${window.location.hash}"]`).parent().index()]).show();
where this.navigation = $("#main-nav"), the parent of the .nav elements, but it does not work in this way.
Any suggestions on how I might approach this?
The inner jQuery object should be moved outside of the string literal, and the attribute selector needs to be placed inside the find() call.
$(this.$content[$(this.$navigation).find(`a[href$="${window.location.hash}"]`).parent().index()]).show();
In addition, I would assume from the naming convention that $navigation already holds a jQuery object so does not need to be wrapped again. As such, this should work:
$(this.$content[this.$navigation.find(`a[href$="${window.location.hash}"]`).parent().index()]).show();
This question already has answers here:
Is there a JavaScript / jQuery DOM change listener?
(5 answers)
Closed 5 years ago.
I'm making a Chrome Extension for Roblox, and I need to wait for all of the children of a certain element to load so I can do stuff with them. Currently, this logs all of the elements as they are added, but I need to dig deeper in their children to find class "game-card-name", but it seems to be non-existent whenever I do $(e).find("game-card-name")
console.log("Roblox Bookmark Loaded");
$(document).on("DOMNodeInserted", function(e) {
if ($(e.target).hasClass("game-card")) {
console.log(e);
}
});
What I need is a way to search in jQuery, and wait for an element to exist, and possibly yield until an attribute is present. If anyone has a jQuery answer, please post!
EDIT: I was not doing $(e.target). I solved this
but I need to dig deeper in their children to find class "game-card-name", but it seems to be non-existent whenever I do $(e).find("game-card-name")
You're missing the . in the selector to find the class.
//---------v
$(e).find(".game-card-name")
Your selector was looking for elements with the tag name, like <tame-card-name>.
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:
Closed 10 years ago.
Possible Duplicate:
jquery select iframe children
I have many frames in my asp.net website. Since I don't know its layout and I need to update a <span> value in a diferent diferent frame where my jquery code is, I do the following:
$('#myspan').text('sometext');
but anything changes. So I don't know if it's because jquery didn't manage to catch the element with this selector because is not in its scope or why.
However this:
alert($('#myspan')); it shows an alert with [object][object] as result.
The jQuery function ($('someSelector')) will always return an object, even if no elements match the selector.
If you really are using multiple frames, you have a problem: jQuery can't find elements across frames, only in the current document/frame – unless you pass a proper context object for the specific document you want to target.
For example, if you have an <iframe id="myframe">, you can look for #myspan inside it with this:
var frameDoc = $('#myframe')[0].contentWindow.document;
var mySpan = $('#myspan', frameDoc);
For that to work, the iframe's source must be hosted in the same domain as the main page. There's also the following cleaner options, suggested in the comments below:
var mySpan = $("#myframe").contents().find('#myspan')
or
var mySpan = $('#myspan', $("#myframe").contents());
A good way to debug jQuery problems is this pattern:
var e = $(...);
console.log(['Explanation', e.get()]);
get() without arguments will convert the strange jQuery selector result to a normal JavaScript array which you can expand in your browser's console. That should help to see what the selector returned.
If it doesn't match anything, then your selector is wrong somehow. Check the current DOM in your browser's development tools if the element is really there.