动态创建的表行是否不能由jQuery定位? [英] Are dynamically created table rows not targetable by jQuery?

问题描述

我正在尝试使表行可拖动，然后使connectToSortable -able.

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

由于某种原因，当我将tbody ("#sem1")的ID放入选择器时，它可以工作，但显然会拖拽整个表体及其所有行. 但是，当我在选择器中放入"#sem1 tr"时，该网页似乎只是忽略了该代码，这意味着该表仍然可以正确显示，但是任何东西都无法拖动.

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>

像这样，通过一些JavaScript表行将它们添加到sem1中.

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

JavaScript:

JavaScript:

第一个pos0[0](一个数组)被填充:

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>");
}

然后将pos0[0][a]这样添加到sem1中:

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()

在选择器中仅输入tr也不起作用(我不介意整个文档中的所有表行都可拖动)

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)

**我知道代码说setPos[0]-它是函数的一部分，该函数与pos1，pos2 ...

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

在此先感谢您的帮助！

推荐答案

我的猜测是，在插入新<tr>的代码运行之前，您正在调用$("#sem1 tr").draggable()行，因此它没有.看不到您添加的行.

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?

如果您可以在jsfiddle或其他示例中发布示例，这样我们可以与您一起解决这个问题会有所帮助.

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

最后，在这种情况下，这可能会显得有些矫kill过正，但如果您打算在应用程序中构建html块，您是否考虑过使用JavaScript模板引擎?

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?

这篇关于动态创建的表行是否不能由jQuery定位?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！