Обновление содержимого элемента jquery

182

28 октября 2018, 21:10

меняю содержимое внутри тэга, где присутствует кнопка. Кнопка генерирует новое содержимое для тега. Получается один раз нажать на кнопку "сгенерировать", но после того как обновляю содержимое внутри тега (в том числе и кнопку), кнопка перестает работать. Заранее извиняюсь если плохо объяснился, вот код:

<table cellspacing="0">
    <tr>
        <th>Поле</th>
        <th>Код</th>
    </tr>
  <tr class="users_row">
        <td>Тест1</td>
        <td>345234<input type="button" class="button_gen" value="Генерировать" /></td>
    </tr>
  <tr class="users_row">
        <td>Тест2</td>
        <td>433424<input type="button" class="button_gen" value="Генерировать" /></td>
    </tr>
  </table>
$(document).ready(function() {
  function randomInteger(min=100000, max=999999) {
    var rand = min - 0.5 + Math.random() * (max - min + 1)
    rand = Math.round(rand);
    return rand;
  }
  $(".button_gen").click(function() {
    var clickId = $(this).parent().parent().index()-1;
    var line = $(this);
    var current_line = line.parents().eq(0).html();
    var pin = randomInteger();
    line.parents().eq(0).html(pin + '<input type="button" class="button_gen" value="Генерировать" />'); 
  });
});

http://jsfiddle.net/0s9otdgn/1/ Натолкните на мысль, как реализовать правильно. Заранее спасибо

Answer 1

У вас вновь созданная кнопка еще не в курсе что у нее есть обработчик. Поэтому надо повесить снова после добавления нового input.

$(document).ready(function() {   
  
 $(".button_gen").on('click', generic);    
   
}); 
 
function randomInteger(min=100000, max=999999) { 
    var rand = min - 0.5 + Math.random() * (max - min + 1) 
    rand = Math.round(rand); 
    return rand; 
} 
var generic = function() { 
 
   $('.button_gen').off('click', generic); 
 
   var clickId = $(this).parent().parent().index()-1, 
   line = $(this), 
   current_line = line.parents().eq(0).html(), 
   pin = randomInteger(); 
   line.parents().eq(0).html(pin + '<input type="button" class="button_gen"  value="Генерировать" />');  
   
   $('.button_gen').on('click', generic);   
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<table cellspacing="0"> 
  <tr> 
    <th>Поле</th> 
    <th>Код</th> 
  </tr> 
  <tr class="users_row"> 
    <td>Тест1</td> 
    <td>345234<input type="button" class="button_gen" value="Генерировать" /></td> 
  </tr> 
  <tr class="users_row"> 
    <td>Тест2</td> 
    <td>433424<input type="button" class="button_gen" value="Генерировать" /></td> 
  </tr> 
</table>