Javascript 重新订购<；tr>；不为新添加工作<；tr>；

我试图通过单击“添加”按钮来动态添加一行，然后我试图通过单击相关按钮来上下移动。。。在有3行静态行的代码中，文本框中键入的数据可以完美地上下移动。但是对于我动态创建的行，没有任何操作

我知道javascript不会对动态创建的元素执行操作。。如果是这样，我要做什么来解决这个问题…谢谢

var html='row4'；
$（函数（）{
$（'#addRow'）。单击（函数（）{
$（'tbody'）.append（html）；
});
$（'#mytable input.move'）。单击（函数（）{
var行=$（this）.closest（'tr'）；
if（$（this）.hasClass（'up'））
row.prev（）.before（row）；
其他的
row.next（）.after（row）；
});
});

第1行
第2排
第3排
添加
使用Jquery


var html='row4'；
$（函数（）{
$（'#addRow'）。单击（函数（）{
$（'tbody'）.append（html）；
});
$（document）.on（'click'，'#mytable input.move'，function（）{
var行=$（this）.closest（'tr'）；
if（$（this）.hasClass（'up'））
row.prev（）.before（row）；
其他的
row.next（）.after（row）；
});
});

第1行
第2排
第3排
添加
我个人的首选是总是用
vanilla
JS编写
Javascript
。所以我在
vanilla
JS中重写了答案


//定义表
const table=document.getElementById（'table'）；
//为“向上”、“向下”和“添加”按钮设置eventlisteners
数组.from（document.getElementsByClassName（'table_umove-up'））.map（button=>button.addEventListener（'click'，（）=>moveRowUp（button.parentNode.parentNode））；
数组.from（document.getElementsByClassName（'table_umove-down'））.map（button=>button.addEventListener（'click'，（）=>moveRowDown（button.parentNode.parentNode））；
Array.from（document.getElementsByClassName（'add_行'））.map（button=>button.addEventListener（'click'，（）=>addRow（table））；
//向上移动行的函数
函数moveRowUp（行）{
if（row==table.children[0]）返回；
row.parentNode.insertBefore（row，row.previousElementSibling）；
}
//向下移动行的函数
函数moveRowDown（行）{
if（row==table.children[table.children.length-1]）返回；
row.parentNode.insertBefore（row.nextElementSibling，row）；
}
//用于向表中添加新行的函数
函数addRow（）{
//添加新tr
const row=document.createElement（'TR'）；
表2.追加子项（行）；
//在文本中添加一个新列。例如，第6行
const tableNameCell=document.createElement（'TD'）；
行.appendChild（tableNameCell）；
tableNameCell.innerText=`row${table.children.length}`；
//在文本输入中添加一个新列
const inputCell=document.createElement（'TD'）；
行.appendChild（inputCell）；
const inputText=document.createElement（'INPUT'）；
inputCell.appendChild（inputText）；
inputText.type='text'；
//在“上移”按钮内添加一个新列
const moveUpCell=document.createElement（'TD'）；
行.appendChild（moveUpCell）；
const inputButtonUp=document.createElement（'INPUT'）；
appendChild（inputButtonUp）；
inputButtonUp.type='button'；
inputButtonUp.value='向上移动'；
inputButtonUp.addEventListener（'click'，（）=>moveRowUp（inputButtonUp.parentNode.parentNode））；
//在“下移”按钮内添加一个新列
const moveDownCell=document.createElement（'TD'）；
行.appendChild（moveDownCell）；
const inputButtonDown=document.createElement（'INPUT'）；
moveDownCell.appendChild（inputButtonDown）；
inputButtonDown.type='button'；
inputButtonDown.value='下移'；
inputButtonDown.addEventListener（'click'，（）=>moveRowDown（inputButtonDown.parentNode.parentNode））；
}

第1行
第2排
第3排
添加
非常感谢Aswin Kumar。。。工作起来很有魅力…你救了我的命。。
$(document).on('click', '#mytable input.move', function() { ... });