Say I have two buttons "Add Link" and "Add Text". The "Add Link" button automatically appends the following to the existing page:
When i click on the button "Add Text", the text of all dynamic links created should contain the text "Text".
I originally use "$("a").text("Text")" for the function of the "Add Text" button, but it does not work because the links are dynamically created as the user clicks the "Add Link" button.
How do I make it so that I can get "Text" into all of the dynamically created link?
NOTE: Something Like this
$('buttonforaddtext').live('click', function() {
$("a").text("Text");
});
Does not work for me because the button has been there the whole time, its the "a" that are dynamically created with the click of the "Add Link" button.
Try like below as I mentioned in comment,
$('#addLink').on('click', function () {
$(body).append('');
});
$('#addText').on('click', function () {
$('a.newLink').text('New Link');
});
$('button').on('click', function() {
/* your code */
});
If you have dynamic object you need to use .on() to let it work...
var yourLink = $(""+yourText+"");
or
var yourLink = $("<a href="+someURL+"/>");
yourLink.html("Text");
then
yourLink.appendTo($('body'));
Thats if you wish to create # the same time
That you describe sounds fine to me. Maybe you should post the code you are using. The follow should work:
$('#addLink').click(function(){
$('body').append('');
});
$('#addText').click(function(){
$('a').text('Text');
});
As long as your jQuery object ($('a')) is being created after the click event has happened, everything should work as you describe.
You need to use '.live' method, as our colleague said before. It happens that in the moment you are trying to bind the event, the element doesn't exis and it dosn't work.
Using .live, the window will keep listening for the element you've selected.
In the case you're using jQuery 1.7.+, I recomend you use the .on() method to bind the event and the .off() to unbind it as soon you dont need it anymore...
PS.: By the way, what are you trying to select?
$('buttonforaddtext')
Your problem is probably that live is beyond deprecated or you don't have the HTML that you think you have. Since you re-query the A tags in your callback for the text insertion and the button is static HTML, you shouldn't need 'live' or 'delegate' or 'on'. Just do a simple .click
Related
I am trying to check if a user clicked on a kind of a href in a specific class.
I am appending the class in jquery because I need to put a different link every time
$("#list-dir").append("<a href='' class='add-href'><il class='dir-items'> " + dir_items[i] + " <br> </il></a>")
$(".add-href").eq(i).attr("href", href_element);
and it works as it should I can see the class and the correct link in the HTML file. But when I try to check if the user clicks it nothing works for some reason like the class isn't there
This ^ was how the webpage looks after I modified it with JQuery.
I already tried putting this code:
$(document).ready(function(){
$(".add-href").on("click", function(e){
console.log("d")
});
});
as most of the answers suggest but it didn't work.
Thanks to CBore for giving me the answer. I had to use event delegation. after I did it worked perfectly fine. in addition like Aslan Kayardi said I could of also create another element like the data-href and enter the link in the value
I am using a .click function to switch out text based on menu clicks. (example:http://jsfiddle.net/3r9hcz3z/) It works great except that I am still pretty new to Jquery & I can't figure out how to add a link inside of on one of the .html() menu items.
Any help would be awesome. I know that there is a way to do it within the Jquery but just can't find the right coding. Thanks!
$('#menuone').click(function(){
$('#title').text("ONE");
$('#text').html("This is text & where I would like to be able to add a link");
});
$('#text').html("<a href='someUrl'>Link</a>");
This should do it.
one clean way to do this is to add a class to your anchor, and then set its href attribute through .attr:
$('.a_class').attr('href','http://example.com');
Ok, so I'm making a login screen for an application with a button that says "Not You?" which, when clicked, brings up a text-box to update the username on the screen. The issue I'm having is: the username updates once, but when tried again doesn't work. What's wrong with my jQuery?
Here's my jQuery:
var main = function(){
$('.not').click(function(){
$('.login-wrap').fadeOut(300, function(){
$('.not-you').fadeIn(300);
});
});
$('.enter').click(function(){
$('.name').replaceWith($('.new-input').val());
$('.not-you').fadeOut(300, function(){
$('.login-wrap').fadeIn(300);
});
});
}
$(document).ready(main);
And HERE'S a link to the CodePen.
Thanks!
From the docs, The .replaceWith() method removes content from the DOM and inserts new content in its place with a single call,so for first time it is working fine but when first time .replaceWith() is used it replaces whole '.new-input' with class 'name',that is why afterwards it is creates problems.
Instead of
$('.name').replaceWith($('.new-input').val());
Try
$('.name').html($('.new-input').val());
OR
$('.name').text($('.new-input').val());
see here.
When you are doing replaceWith(), you are actually removing the whole tag with class '.name'.
So in the next time the code is unable to find any object with class 'name'.
Use '.html()' to make it work.
You can change your replaceWith() line with the following:
$('.name').replaceWith("<span class='name'>"+$('.new-input').val()+"</span>");
replaceWith() actually replaces the whole DOM element that has the class of name.
.replaceWith() | jQuery API Documentation
I have 5 windowDiv on my page that have a button with id "#button". The button's purpose is to change the size of the windowDiv. The windowDiv has a large version (called windowDiv) and a small version (windowDivSmall).
The top container div of the page is called topContainerDiv.
The problem is that I can't get this to work for just one windowDiv, let alone all 5 of them. I know I need to use topContainer.replaceChild(windowDiv, windowDivSmall); but I just can't get it to work.
What I currently have is the following:
$("#button").click(function() {
$(topContainerDiv).replaceChild(this.windowDivSmall, this.windowDiv);
// The code above is broken and doesn't work. Help!
});
I suspect you to use 5 #button.
You cannot.
change in HTML id="button" for class="button" and update your jquery :
$(".button").click(function() {
// correct jquery functions to call here :)
});
replaceChild is a JavaScript function. You are calling this function on a jQuery object. You could try the jQuery replaceWith method`: http://api.jquery.com/replaceWith/
I have created a simple jquery popup.
Throughout my site I have several btns that each link to a different pop up.
My question:
Is there a way to link all buttons to there relevant popups without having to list every button and div by name as I begun to do so below?
Or alternatively the shortest way to list all buttons and divs without having to write the click event for each?
$(function() {
$('.Btn1').click(function(e) {e.preventDefault();
$('.Pop1').fadeIn();});
$('.Btn2').click(function(e) {e.preventDefault();
$('.Pop2').fadeIn();});
var modalBgd = $('.PopBgd')
$('.PopClose, .PopBgd').click(function(e) {e.preventDefault();
modalBgd.fadeOut();});
});
you could provide the id/class of the popup within a data element in the link like this:
open popup 1
open popup 2
that'll reduce your javascript to this:
$('.openpopup').click(function(e) {
e.preventDefault();
$($(this).data('popup')).fadeIn();
});
Depends on how your links/button/clickable elements look like. I would do something like this: select all of these elements and just apply the event handler to them e.g.
$(".popup").click(...);
You can use a more sophisticated selector to it but the idea is always the same. Remember that a element can have multiple classes to it.