在 DOM 中更新后，jQuery 的更改事件不起作用

Question

我有一个当选择选项更改时正在更新的表，所以现在我编写的更改函数仅在第一次时有效，当 DOM 被操作时它不起作用，

\n

这是一个Fiddle，

\n

超文本标记语言

\n

<table class="parametros" border=1>\n    <tbody>\n        <tr>\n            <th colspan=3>Yo Yo Honey singh</th>\n        </tr>\n        <tr>\n            <td>1</td>\n            <td>2</td>\n            <td>\n                <select id="selectPlantilla">\n                    <option>fisrt</option>\n                    <option>2nd</option>\n                    <option>3rd</option>\n                    <option>4th</option>\n                </select>\n            </td>\n        </tr>\n    </tbody>\n</table>\n

\n

脚本

\n

$("#selectPlantilla").on("change", function () {\n    var descripcion = $(this).val();\n    var plantilla = $("#selectPlantilla").html();\n    //alert(plantilla);\n    var ObjPlantilla = "FAP",\n        prefijo = 1,\n        sufijo = 3;\n    var plantilla = $("#selectPlantilla").html();\n    var caption = "<caption><h1>Par\xc3\xa1metros generales de la plantilla</h1></caption>";\n    var header = "<tbody><tr><th>Campo</th><th colspan=\'2\'>Filtro</th></tr>";\n    var row2 = "<tr><td><label for=\'nombrePlantilla\'>Nombre de la plantilla</label></td><td width=\'40%\'><label>" + ObjPlantilla + "</label></td><td><label>Plantillas </label><select id=\'selectPlantilla\' name=\'selectPlantilla\' style=\'min-width:200px;\'>" + plantilla + "<input type=\'submit\' value=\'Cargar\'></td></tr><tr><td>Prefijo</td><td colspan=\'2\'><input type=\'text\' style=\'width: 100%;border: solid 1px black;\' value=" + prefijo + " id=\'prefijo\' name=\'prefijo\'></td></tr><tr><td>Sufijo</td><td colspan=\'2\'><input type=\'text\' style=\'width: 100%;border: solid 1px black;\' value=" + sufijo + " id=\'sufijo\' name=\'sufijo\'></td></tr>";\n    var footer = "<tr><td></td><td align=\'right\' colspan=\'2\'><button class=\'addRow\' type=\'button\'>Add Row</button><input type=\'submit\' value=\'Siguiente\' name=\'submit\' id=\'botonEnviar\'></td></tr></tbody>"\n\n    $(".parametros").html(caption + header + row2 + footer);\n});\n

\n

简而言之，当您更改表中的选择选项时，表会更新，但如果您再次更改选择选项，则表不会更新。

\n

Answer 1

当您重新创建元素时。使用语句

$(".parametros").html(caption + header + row2 + footer);

您需要使用.on ()委托事件方法来使用事件委托。

事件处理程序仅绑定到当前选定的元素；当您的代码进行事件绑定调用时，它们必须存在于页面上。

IE

$(document).on('event','selector',callback_function)

例子

$(".parametros").on('click', "#selectPlantilla", function(){
    //Your code
});

委托事件的优点是它们可以处理来自稍后添加到文档中的后代元素的事件。通过选择一个在附加委托事件处理程序时保证存在的元素，我们可以使用委托事件将单击事件绑定到动态创建的元素，并且还可以避免频繁附加和删除事件处理程序的需要。