Обработчик кликов не работает после Jquery POST

Question

У меня есть веб-страница с опцией Select и FORM. Когда пользователь меняет выделение, функция My jquery script будет динамически выполнять ajax POST для замены исходной формы другой формой (новые элементы формы).

Ноя заметил, что обработчик кликов (событие $ (button) .click ()) не работает во вновь созданной форме. Пожалуйста, помогите в этом.

Это известная проблема в Jquery ??.

<select id=choice><option>....</select>
<div class=mytable>
<form id='dataform-10'>
.....
<button id="edit-10"></button>
</form>
<div>
<script>
  $(function(){
  $("#choice").change(function(){
    $.get('/portal/go?id='+this.value, function(data, status){ 
            //$(".mytable").hide();
            $(".mytable").html(data);
            $(".mytable").show();
          });
  });
});
</script>
<script>
$('[id^=edit]').on("click",function(e) {
    e.preventDefault();
   var num = this.id.slice(5);   
   var fdata = $('#dataform-'+num).serialize();
   $.post('/portal/update', fdata, function(data, status){ 
            alert(data);
          });
});
</script>

Answer 1

Как указывалось @ sh977218, причина, по которой событие click не работает, заключается в добавлении новых элементов в DOM после начального тегирования обработчиков событий. Попробуйте что-то вроде этого:

<script>
function clickEventHandler(event) {
  // code for click event 
   event.preventDefault();
   var num = event.target.id.slice(5);   
   var fdata = $('#dataform-'+num).serialize();
   $.post('/portal/update', fdata, function(data, status){ 
        alert(data);
      });
}
$('[id^=edit]').on("click", function(e){clickEventHandler(e);});
$("#choice").change(function(){
  $.get('/portal/go?id='+this.value, function(data, status){ 
        //$(".mytable").hide();
        $(".mytable").html(data);
        $(".mytable").show();
        $('[id^=edit]').on("click", function(e){clickEventHandler(e);});
      });
});
</script>

Answer 2

... $('[id^=edit]').on("click",function(e) { ...

должно быть

... $(".mytable").on("click", "[id^=edit]", function(e) { ...

Вы пробовали вот так?

Answer 3

Когда вы добавляете новый DOM, вам нужно снова подключить событие к нему.