Замена button и radiobutton через jQuery replaceWith()

Всем добрый день!

С помощью jQuery и Ajax хочу подменить кнопки на странице. Но при первом нажатии срабатывает, а дальше уже нет. Не могу понять в чем проблема. Буду благодарен за обьяснение!

Код Ajax который вызывает файл PHP:

$(document).ready(function(){ 
$('.ChangeNum').click(function(){
    
    var elemVal = $(this).attr('value');
    console.log(elemVal);
    var div_elem = '#abc_' + $(this).attr('value');
    var num_data = {
        'service' : $(this).attr('value')
    };  
    $.ajax({ 
        type:'post', 
        url:'get_num.php', 
        data: num_data
    })
    .done(function(data){ 
        $(div_elem).html(data); 
    });
}); }); 

Код скрипта который вызываю в файле PHP:

$(document).ready(function(){
  var radioBut = $("input[name='rad_123']");
  console.log(radioBut);
  for (var i=0; i<radioBut.length; i++){
     var oldVal = radioBut[i].value;
     radioBut[i].replaceWith( $('<input type="radio" value=" + oldVal + " name="rad_test_123">\'  )[0] );
  };
  $('button.ChangeImei[value="but_123"]').replaceWith( '<button  type="button" class="ChangeNum" value="but_test_123">Change IMEI</button> ').html();       

});

Ответы (1 шт):

Автор решения: Artur Kontvitskiy

Во время замены кнопки сбрасываются все ивенты, которые на нее повесили. Фактически - создается новый элемент.

$('.ChangeNum').click() срабатывает только один раз при загрузке страницы и только для тех элементов, которые уже есть в DOM.

Чтобы после обновления все работало, нужно инициализировать следующим образом

$(document).on('click', '.ChangeNum', function() { ваш код здесь })

Это сработает для всех элементов с классом "ChangeNum" - в т.ч. и для тех, которых еще нет на странице.

→ Ссылка