jquery:Dialog box not poping in a dynamically generated table

Question

I have created a struts2-jsp application,i want a dialog pop up whenever edit hyperlink in clicked,I am using Jquery to pop up a dialog when Edit hyperlink is clicked. The problem is that Dialog box pops up only when the first edit is clicked,in the second and other edits which are generated dynamically when a record is added dialog box doesn't pops up.

The Jquery code is:

<script>
$(document).ready(function(){
$( "#todo" ).dialog({ autoOpen: false });
$( "#dialogLink" ).click(function() {
$( "#todo" ).dialog('open');
});
});
</script>

The code to dynamically generate the table is:

<div class="content">
        <table class="todoTable" cellpadding="5px">
             <tr class=even>
                <th>TITLE</th>
                <th>STATUS</th>
                <th>EDIT</th>
                <th>DELETE</th>
            </tr>

           <!--This will iterate through the todolist -->
            <s:iterator value="gettodoList()" status="todoStatus">

                <tr class="<s:if test="#todoStatus.odd == true ">odd</s:if> <s:else>even</s:else>">

                    <td><s:property value="title" /></td>
                    <td><s:property value="complete" /></td>

                    <!-- This will append the Id with the url -->
                    <td> 
                    <a id="dialogLink" href="#">Edit</a> 
                    </td>
                    <td><s:url id="deleteURL" action="deleteTodo">
                                    <s:param name="id" value="%{id}">                       </s:param>
                        </s:url> <s:a href="%{deleteURL}">Delete</s:a>
                   </td>
               </tr>
            </s:iterator>
            </tbody>
        </table>
    </div>

Possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — vijayP, Sep 19 '16 at 07:14
also `id` can not be duplicated in single document. Try giving then a `class` instead of `id` and bind event via event delegation technique. — vijayP, Sep 19 '16 at 07:17
make sure that jquery code is executed after updating the table. perhaps the jquery code is executed only once at the beginning — chank, Sep 19 '16 at 07:17

score 1 · Accepted Answer · answered Sep 19 '16 at 07:23

1

You need to use the .on() to set the event handler instead of the .click() as the latter will only attach the event on existing nodes while the first will attach it to existing nodes and new ones as well similar to how .live() used to work in earlier versions of jquery

take a look at http://api.jquery.com/live/

answered Sep 19 '16 at 07:23

Eyal Alsheich

452
4
12

i used the .on() But still dialog box is poping up for first edit hyperlink – triples13 Sep 19 '16 at 07:31
since you are setting all of the iterated items with the same ID this will happen, either give them diffrent IDs or set a class instead – Eyal Alsheich Sep 19 '16 at 07:44
dynamically creating id for each anchor tag worked for me – triples13 Sep 19 '16 at 08:41

score 0 · Answer 2 · answered Sep 19 '16 at 07:37

0

1) it is because you are using an id, use a class and it should work fine.
&
2) you should try to use on() for dynamically generated elements.

answered Sep 19 '16 at 07:37

Bharat Patel

197
4

jquery:Dialog box not poping in a dynamically generated table

2 Answers2