CODEWITHSUNDEEP
jquery-ui
user2603818
user2603818

Reputation: 3

Are dynamically created table rows not targetable by jQuery?

I'm trying to make table rows draggable and then connectToSortable -able.

For some reason, when I put the ID of the tbody ("#sem1") in the selector, it works but obviously drags the whole table-body with all of its rows. However, when I put "#sem1 tr" in the selector the webpage seems to just ignore that code, meaning the table still shows up correctly, but nothing becomes draggable.

HTML:

<table class = "sem">                                   
    <thead>
        <th class = "header1">header</th>
        <th class = "header2">header</th>
        <tr>
            <td class = "static1">static1</td>
            <td class = "static2">static2</td>
        </tr>
    </thead>
    <tbody id = "sem1"> 
    </tbody>
</table>

Through some JavaScript table rows get added to sem1 like so.

JavaScript:

First pos0[0] (an array) gets populated: 

for(var i in setPos[0]){
    setPos[0][i]=("<tr><td class = " + String(setClass[i])+ ">" + setPos[0][i].slice(2) + "</td><td class = 'someClass'>"+setThis[i]+"</td></tr>");
}

Then pos0[0][a] gets added to sem1 like this:

for(var a in pos0[0]){
    document.getElementById("sem1").innerHTML += pos0[0][a];
}

and when I try to make the rows draggable, it just doesn't work.

jQuery:

$("#sem1 tr").draggable()

Putting just tr in the selector doesn't work either (I don't mind if all the table rows in the whole document are draggable)

**I know that the code says setPos[0] - it's part of a function that does the same thing to pos1, pos2...

Thanks in advance for any help!

Upvotes: 0

Views: 280

Answers (1)

rtpHarry
rtpHarry

Reputation: 13125

My guess is that you are calling the $("#sem1 tr").draggable() line before the code that has inserted the new <tr>'s has been run, so it doesn't see the rows you've added.

Also, have you tried manually inserting some markup to check that the draggable code actually works on a per row basis?

It would help if you could post an example in jsfiddle or something so we can work on this with you.

Finally it could be overkill for this situation but have you looked into using a JavaScript templating engine if you are going to be building chunks of html in your app?

Upvotes: 1

Related Questions