Develop Reference

Is there a way to apply jQuery to dynamically created elements? (not event listeners)

I have dynamically created an element with the following class:
<span class="text">Hello</span>
and jQuery:
function changeText() {
var oldText = $(this).text();
$(this).text(oldText + " There");
}
$(function() {
$(".text").each(function(){
changeText.apply(this);
})
})
Obviously, this is a simplified version of what is actually happening but the basics are there. Is it possible to apply this rule to dynamically created elements even though we are not using event listeners?
The problem here is that there is no specific location for these ".text" elements. The only place we know these will show up is in the body. I we use a mutationObserver on the body... wouldn't that be taxing performance?

Do this instead:
function changeText() {
var oldText = $(this).text();
$(this).text(oldText + ' There');
}
$(function(){
$('.text').each(function(i, e){
changeText.call(e);
});
});

Like this
$dynamicElement.find(".text").each(function(){
changeText.apply(this);
})

Add/Remove classes not working for some reason [duplicate]

This question already has answers here:
How do I attach events to dynamic HTML elements with jQuery? [duplicate]
(8 answers)
Closed 7 years ago.
var vaStyle = $("nav.global_nav, .rsGCaption .intro-caption");
var vid_detach = $("div.rsCloseVideoBtn");
var vid_launch = $("h1#vidLaunch");
vid_launch.click(function () {
vaStyle.addClass("hprs-video-active");
});
vid_detach.click(function(){
vaStyle.removeClass("hprs-video-active");
});
Why isn't my removeClass working? Is there a better method?
Also, when you declare a var does it work document-wide?

Sounds like your elements are getting added dynamically. Use event delegation for solving this. I made changes to the event binding.
var vaStyle = $("nav.global_nav, .rsGCaption .intro-caption");
var vid_detach = "div.rsCloseVideoBtn";
var vid_launch = "h1#vidLaunch";
$(document).on('click', vid_launch, function () {
vaStyle.addClass("hprs-video-active");
});
$(document).on('click', vid_detach, function () {
vaStyle.removeClass("hprs-video-active");
});

Button created with jQuery/JS, don't react to click [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
jQuery click not working for dynamically created items [duplicate]
(8 answers)
Closed 7 years ago.
I'm trying create a list of Messages a user can type in an textarea on the site and delete any of them using a button he automatically creates with each message.
My idea is that I create a div in which I first put the message of the user in and then prepend the button with the same ID of the div; This way I call the ID of the button and remove all elements with the same ID.
<script>
var theButtonId = 1;
$(document).ready(function() {
$('#commentButton1').click(function() {
var toAdd = $("textarea#commentTextarea1").val(); //Content to add
var theId = "dieButtons"+theButtonId.toString(); //creating unique ID
// Adding first Div
$('#targetField').append(
$('<div />', {
id: theId,
}));
// Adding content
$('#'+theId).append(
$('<div />', {
text: toAdd
}));
//(-----1-----)Adding Button
$('#'+theId).prepend(
$('<button />', {
type: 'button',
id: theId,
class: 'commentButton2',
text: "-"
}));
theButtonId++;
});
});
//Button Command
$(document).on("ready", function(){
//(-----2-----)
$('.commentButton2').on("click", function(){
var thisId = $(this).attr("id");
$("#"+thisId).remove();
});
});
</script>
It perfectly lists the elements in the #textfield
I added a button directly in my HTML code which deletes certain divs, as well as itself using the code above. This is why I know that the Problem is that the created Buttons at (-----1-----) don't react to the command in (-----2-----)
I already tried to create an Input of type button and put a .click function instead of .on("click", [...]).

$(document).on('click', '#buttonid', function() {
});
Use event delegation on dynamically created elements
DOCUMENTATION

Working fiddle
Try to use :
$('#targetField').on("click",'.commentButton2', function(){
Instead of :
$('.commentButton2').on("click", function(){
It should work.

jQuery .click function is not working? [duplicate]

This question already has answers here:
Event handlers inside a Javascript loop - need a closure?
(2 answers)
Closed 7 years ago.
I have a javaScript file in which i am trying to bind a function named change by using jQuery i tried this code but it is not working?
script.js
for(var i=1; i<suggestionList.length; i++)
{
$list.append("<li>" + suggestionList[i] + "</li>");
// attach handler for click on the suggestions
$list.find("li").eq(i).click(function() {
change(suggestionList[0], suggestionList[i]);
});
}
function change(changeto,changewith)
{
var replaceto=document.getElementById(changeto).innerHTML;
var replacewith=changewith;
var text1=document.getElementById("para").innerHTML;
var afterRe=text1.replace(replaceto,replacewith);
document.getElementById("para").innerHTML=afterRe;
}
please help me why my code is not working?

you can't use i inside the for-loop for click event. I have set a demo jsfiddle here .check If it helps
for(var i=1; i<suggestionList.length; i++)
{
$list.append("<li>" + suggestionList[i] + "</li>");
// attach handler for click on the suggestions
}
$list.find("li").click(function() {
changewith=$(this).html();
change(suggestionList[0], changewith);
});

How to get tagname of the current selected element in jquery [duplicate]

This question already has answers here:
Get element type with jQuery
(7 answers)
Closed 9 years ago.
I use $('[attribute]') to select html nodes. When I am using the nodes it would be nice to know which html element was selected.
Pseudo code:
$('body').on('click', '[action]', function(){
var htmlElementName = this.name;
if(htmlElementName == 'form'){
return;
}
//do stuff
});

Just get the value of a tagName property:
var htmlElementName = this.tagName;
REF: https://developer.mozilla.org/en-US/docs/Web/API/Element.tagName

As per the title, in jQuery specifically
$(this).prop('tagName');
the native version seems simpler
this.tagName
note that case might vary, so using toLowerCase() is generally a good idea

You can use this.tagName
$('body').on('click', '[action]', function(){
var htmlElementName = this.name;
var tagName = this.tagName;
if(htmlElementName == 'form'){
return;
} //do stuff
});

Try this:
$('body').on('click', '[action]', function(e){
var htmlElementName = $(this).prop("tagName");
});