Question

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

以下是FIddle，

HTML

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

脚本

$("#selectPlantilla").on("change", function () {
    var descripcion = $(this).val();
    var plantilla = $("#selectPlantilla").html();
    //alert(plantilla);
    var ObjPlantilla = "FAP",
        prefijo = 1,
        sufijo = 3;
    var plantilla = $("#selectPlantilla").html();
    var caption = "<caption><h1>Parámetros generales de la plantilla</h1></caption>";
    var header = "<tbody><tr><th>Campo</th><th colspan='2'>Filtro</th></tr>";
    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>";
    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>"

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

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

先谢谢

Answer 1

当您重新创建元素时。使用声明

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

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

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

即

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

实施例

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

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

在dom中更新后，更改Jquery的事件不起作用

1 个答案: