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();
}
)
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.
This question already has answers here:
Firebase child_added only get child added
(5 answers)
Closed 3 years ago.
I need to set up an event listener for firebase that listens for the event whenever a new child is added to a node. But looking at firebase's docs, I have yet to find a good solution.
I thought of using the child_added event. But according to the document, "child_added is triggered once for each existing child and then again every time a new child is added to the specified path."
But I don't want the event to be triggered for existing children when the listener starts to run.
child_changed doesn't seem to be a viable option, either. Because the doc says "The child_changed event is triggered any time a child node is modified." So I suppose this won't be triggered when adding a new child.
Any suggestions on how I can set up a listener to be triggered ONLY when a new child is added?
I think you are looking for something like this:
firebaseDb.child('KeyName').limitToLast(1).on('child_added', yourCallbackFunction);
Please have a look the codes below. At first, you need to get Database. And need to add callback function using "child_added" to get updating database.
function readMessage(data) {
// doing something
}
$scope.database = firebase.database().ref('database/');
$scope.database.on('child_added', readMessage);
Hope it should be helpful.
Thanks for your reading.
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:
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.