CODEWITHSUNDEEP
htmljqueryjquery-events
Vikram Anand Bhushan
Vikram Anand Bhushan

Reputation: 4886

Change event of jQuery not working after updating in the DOM

I have a table that I am updating when a select option is changed, So now The change function that I have written only works for the first time, When the DOM has been manipulated it does not work,

Here is a FIddle for it ,

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>

Script

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

In short when you change the select option in the table the table is updated but if you change the select option again its not being updated.

Upvotes: 2

Views: 2333

Answers (1)

Satpal
Satpal

Reputation: 133403

As you are re-creating the element. Using statement

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

You need to use Event Delegation using .on() delegated-events approach.

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the event binding call.

i.e.

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

Example

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

The delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, we can use delegated events to bind the click event to dynamically created elements and also to avoid the need to frequently attach and remove event handlers.

Upvotes: 7

Related Questions