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>.
Related
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed last month.
I would like to have the page scroll into an element with class xxxx when any element with class yyyy is clicked.
I wrote this down but it does not work. Any help? I am sure I am doing something wrong but I don't know what.
var my_event = document.getElementsByClassName('yyyy');
my_event.onclick = function zb_scroll_function() {
const activity = document.getElementsByClassName('xxxx');
activity.scrollIntoView();};
On a site that I have no access over the DOM layout, I want to scroll to another area of the site when a link with a specific class is clicked.
Getting elements by class name by getElementsByClassName you receiving HTMLCollection of elements, no single element.
but scrollIntoView is defined on single element, not a collection.
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
You can try:
const activity = document.querySelector('.xxxx');
To better understand context you should read also:
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
and
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection
This question already has an answer here:
How to focus on element that loads after page load
(1 answer)
Closed 4 years ago.
I am using Stripe elements in a Vue component. The elements show nicely in a card, but now I would like to put a v-show on the card when the elements are all 'ready/ mounted'. My question: Is there a way to determine when the elements are completely ready?
I tried something along these lines in an async 'createElement' component method:
this.paymentRequestButton.mount('#payment-request-button')
this.card.mount('#card-element')
this.stripeElementsReady = true
The elements do show but this.stripeElementsReady triggers too early, or can iframe elements not be timed precisely as they are asynchronous 'by nature' or something? BTW I do use await for the actual stripe requests so that should not cause the issue.
Check out this answer
As per the docs you can attach a listener on the element and then call focus when it has mounted.
Not tested code but should look something like this
card.on('ready', function(){
card.focus();
}
)
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')