Question

I cant seem to figure out how to do this but I am creating buttons that when clicked add a new div to a page containing a textbox. This works fine but what I then want to do is if the user clicks on the div I want the divs id to be popped up in an alert box. The code is below.

HTML

     <table>
     <td>
     <ul id ="firstColumn">
                    <div id="identifier">
                    </div>
                </ul>
            </td>
            <td>
                <ul id ="secondColumn" width="5%">
                    <li><input type="button" class="formCreationButton" id="textAdd"       value="Single line text" /></li>
     </td>
     <ul>
     </table>

The jQuery that adds the div and text box is as follows which works fine.

   $('#textAdd').click(function() {
                var newdiv = document.createElement('div');
                newdiv.innerHTML = "Textbox " + textBoxCounter + " <br><div id='container "+counter+"' class='container'><li><input type='text' value='TEXT' name='textBox " + textBoxCounter +"onclick='display(this)'></li></div></br>";

                document.getElementById("identifier").appendChild(newdiv);
                textBoxCounter++
                counter++;
            });

So everytime I click on the button a new div and text box are created. What I want to do now is when a user clicks on the div an alert box will pop up containing the id of the clicked div. Obviously this is not the only thing I want to do but its the part I am stuck on, below is my attempt.

     $(".container > div").click(function(){
                var divID = this.id;
                alert(divID);
                // do other stuff that needs to be done
            });

The only thing that happens when I click on a div is that an alert pops up saying “content”. I need it to contain something like “container1” or “container2” etc.

Anyway thanks in advance for any help provided, it is greatly appreciated. Pretty new to jQuery so having difficulty with things that may seem simple to others.

Answer 1

.on API wil do the trick: http://api.jquery.com/on/ demo http://jsfiddle.net/eqDKP/1/

Please also note that the html table has missing tr tag.

Hope this helps :)

code

   $(".container > div").on('click',function(){
                var divID = this.id;
                alert(divID);
                // do other stuff that needs to be done
            });