Dynamically add textbox, dynamic selector not binding. Help!

Question

0.00/5 (No votes)

See more:

Hi I am using code from jQuery Colour Picker - Dynamic Selector. I have made a button where it dynamically creates a row into my table. In one of the fields I want it to have the jQuery Colour Picker on it.

I know that binding the jquery through the textbox's class works. I put a row and put a textbox that has "color" as it's class. When I dynamically create a row, it does not bind to the row's textbox. Is there something wrong I am doing?

The following is a section of my code where I dynamically create a textbox:

JavaScript

// Add the textBox which is binded to a color picker
        var color = document.createElement('td');
        var textBox = document.createElement('input');
        textBox.setAttribute('id', tag + 'color');
        textBox.setAttribute('type', 'text');
        textBox.onblur = function () {
            updateColor(tag + 'color');
        };
        textBox.setAttribute("class","color"); // This is where the problem is.
        color.appendChild(textBox);
        tr.appendChild(color);

Posted 27-Jun-12 4:43am

Member 8336910

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Karthik. A · Accepted Answer · 2012-06-27T17:18:00

That's because events bound to an element does not apply to dynamically added similar type of elements. Use jQuery's .live to bind to elements created even after you bind to events initially.

Check out this SO question, where the poster has a similar requirement to bind a plug-in to dynamically created elements - http://stackoverflow.com/questions/5766086/using-jquery-plugins-with-live[^] (Because applying plugins is not similar to binding to events using 'live')

Here is another answer of mine which explains jQuery's live - Insert Input type button in HTML Table[^]

Another option is to re-bind every time you create a new text box. Check out this link - http://stackoverflow.com/a/1317427/312219[^]

Hope this helps!