Append jQuery values not affected by javascript

Question

I'm appending values into a div through jQuery, but I've realized what gets appended isn't affected by my javascript functions.

$(".div").append("<input type='text' class='textForm' placement='Value' />");

What I have setup in my javascript code is that it takes the attribute placement of any class "textForm" and makes it a value. But I've realized that once a value is appended, it isn't effected by my javascript. Any ideas on how to fix this issue?

Can you please show us the other code you are talking about as well? — Lix
– Lix, Commented Jul 7, 2012 at 14:33
I think what @eng is trying to say is that it might be preferable to choose a more descriptive name for a class. Right now all we can deduct from the name is that it is a div element. Why not give it a more descriptive name like textFormHolder. It will make your code more readable and easier to extend/maintain. — Lix
– Lix, Commented Jul 7, 2012 at 14:36

score 4 · Accepted Answer · 2012-07-07 14:40:45Z

4

If you are currently using

$(".textForm").click(){}

then now use

$(document).on("click",".textForm",function(){//Dtuff here})

This will attach the .on("click") to the document object and as such it will be enabled on all elements that exist and all elements that are created matching the .textForm selector.

edited Jul 7, 2012 at 14:40

answered Jul 7, 2012 at 14:36

user1432124

Sign up to request clarification or add additional context in comments.

4 Comments

UXerUIer Over a year ago

Actually, I'm using a function in my included javascript file, then calling it to a button like so: <input type="button" onclick="addNew()" />

user1432124 Over a year ago

You can't do that you have to write that function in main page , dude you are using jquery then dump this old way of binding event

UXerUIer Over a year ago

Ah ok, well I wanted to keep organized like that. I had no idea that was the "old way" of doing it.

Kirill Kulakov Over a year ago

It works just fine in Chrome,FF and IE on the the desktop,however IT doesn't on an iphone (safari), are there any suggestion?

Shyju · Accepted Answer · 2012-07-07 14:37:47Z

3

I guess you have some events bounded to some elements like which are not working after the append . something like this.

$(function(){
    $(".someClass").click(function(){
       //dome some thing
    });
});

If you want the same functionality to work on the newly injected( dynamically added via append /jquery ajax etc...) DOM elements, you should consider using jquery on. So your code should be changed like this

$(function(){
    $(document).on("click",".someClass",function(){
       //dome some thing
    });
});

on will work for current and future elements

answered Jul 7, 2012 at 14:37

Shyju

220k106 gold badges420 silver badges499 bronze badges

1 Comment

UXerUIer Over a year ago

Thanks, that makes more sense to me!

Ivan Karajas · Accepted Answer · 2012-07-07 14:51:35Z

0

I'm not sure I understand the bit about why you're copying values from the placement attribute into the input value, but I can offer this suggestion to get your form fields to appear.

$("div").each(function() {
    $(this).append($("<input type='text' class='textForm' placement='Value' />"))
});

I'm assuming that you want to identify your div via the tag name, and not the class name. If this is the case, your jQuery selector will need to be "div", and not ".div". Also, you need to wrap your HTML in $() in order to generate a DOM element.

edited Jul 7, 2012 at 14:51

answered Jul 7, 2012 at 14:38

Ivan Karajas

1,1018 silver badges15 bronze badges

Collectives™ on Stack Overflow

Append jQuery values not affected by javascript

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related