DOM에서 업데이트 한 후 Jquery의 이벤트가 변경되지 않습니다.

Question

선택 옵션이 변경 될 때 업데이트중인 테이블이 있습니다. 지금 작성한 변경 기능은 처음으로 작동합니다. DOM이 활성화되었을 때

HTML, 여기

그것을위한 FIddle, 그것은 작동하지 않습니다 조작

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

문

를 사용하여 당신은 .on() 위임-이벤트 접근 방식을 사용하여 Event Delegation를 사용해야합니다.

이벤트 처리기는 현재 선택된 요소에만 바인딩됩니다. 코드가 이벤트 바인딩 호출을 할 때 페이지에 존재해야합니다.

즉

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

예

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

위임 된 이벤트들은 나중에 문서에 추가 하위 요소에서 이벤트를 처리 할 수있는 장점이있다. 위임 된 이벤트 핸들러가 첨부 된 시간에 존재하도록 보장 된 요소를 선택하면 위임 된 이벤트를 사용하여 click 이벤트를 동적으로 생성 된 요소에 바인딩하고 자주 이벤트 핸들러를 첨부 및 제거하지 않아도됩니다.