How to assign events in jquery for the dynamically adding html controls

Question

0.00/5 (No votes)

See more:

Hi Folks,

How to assign events in jquery for the dynamically adding html controls.

For example:

I have added some control in DOM ready.

$(document).ready(function(){
...
     $(obj).each(function(){
          str += "<input id='txt" + ID + "' type='text' title='" + Text + "' /></li>" //Here adding the control
          ...
          //Here I want to add some event
          $("#txt" + ID).change(function(){
             ...
             ...
             ...
          });
     });
});

If I debug I am not getting the object for the statement $("#txt" + ID)

Help me where I am missing.

Thanks.

Posted 30-Sep-13 20:27pm

Kiran B S

Add a Solution

2 solutions

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)

Sergey Alexandrovich Kryukov · Answer 1 · 2013-09-30T20:43:00

Solution 1

Strange question, because this is the most fundamental approach in jQuery. If you look at your own code, you will see that you are already adding a handler of some event dynamically, change event, for example.

The problem is your HTML. Your resulting HTML containing id is incorrect. For example, if ID is "SomeInput", your code will yield:

<input id='txtSomeInput'></input>
but it should be
<input id="txtSomeInput"></input>
This is just the first bug I could spot.

—SA

Posted 30-Sep-13 20:43pm

Sergey Alexandrovich Kryukov

Comments

Kiran B S 1-Oct-13 3:36am

For readability I have given like this actually I used double quotes like \" instead '.
Moreover, giving single quotes is working fine for other statements.

Here I wanted is before response to the browser need to add the event, I guess it is not possible but give me other way to achieve this, i.e., Add event for the dynamic control.

Sergey Alexandrovich Kryukov 1-Oct-13 8:45am

There is one more possibility: you did it all correctly but fail to see it. The change event on text input is confusing: it is not invoked when you enter characters in it. Your function will only be invoked when you shift focus from a changed input. Try to enter a character and then press Tab. For debugging, add something obvious to the handler, like "alert('working')".

Another possible problem is: are you changing the value of ID on each iteration? All the values of the id parameters on the whole page should be unique. If they are not, the behavior is unpredictable.

If you do it all correctly and it does not work, the problem could be somewhere else, in your '...' fragments. You can reduce the code sample to absolute minimum and show the whole code.

—SA

Kiran B S · Answer 2 · 2013-10-02T04:15:00

Really I felt shy on the way I did coding.

Actually the issue is:
I was binding the event before adding it in to a html tag

I solved by this.

Created a variable, and in the loop assigned the value with comma separated and prefixed with # symbol on each value.

After appending the elements in a div tag then bind the "change" event using the variable.

$(document).ready(function(){
...
     var InputIds = ""; //Variable to capture ids.
     $(obj).each(function(){
          str += "<li><input id="txt" + ID + "" type="text" title="" + Text + "" /></li>"
          InputIds += "#" + "txt" + ID + ", "; //Assigning values with comma separation and prefixed the # symbol.
          ...
     });
     $("#DivInputFields").append(str); //Adding the input fields
     //Remove the end comma from the variable InputIds
     $(InputIds).change(function(){
         ...
         ...
         ...
     });

});

I don't know whether this is right or wrong but working. If am doing wrong please help me.

Thank you Sergey Alexandrovich, I understand the problem in question posted here, I will improve myself to post with clear code.

-Kiran. B. S