Удаление событий Jquery

203

28 апреля 2018, 17:56

Кликаю по элементу, открывается инпут - ввожу новое значение, затем кликаю вне его (происходит сохранение значения), но при этом попадаю на тот же класс который сразу приводит к ОТКРЫТИЮ инпута на рядом стоящем элементе , а надо бы это предотвратить По сути сделать редактирование по клику на элемент и сохранение по клику вне его. То что попадаю на тот же самый класс который строкой ниже - этого не избежать

`  $(document).on('click', '.hours_waiting', function (event) {
        var elem = $(this);
        var elem_class = elem.attr('class').split(' ').shift();
        var old_val = elem.text().trim();
        var el_w = elem.width() + 10;
        //инпута для ввобода нового значения
        elem.html('<input value="' + old_val + '" type="text"  name="' + elem_class + '" style="width:' + el_w + 'px; height: auto;" class="now_edited">');
        var el_in = elem.find('input');
        var name = el_in.attr('name');
        var task_id = elem.parent('tr').data('id');
        el_in
            .focus()
            .off('blur')
            .on('blur', function (event) {
            //здесь идут действия после срабатывания клика вне элемента el_in(но клик попадает снова на класс hours_waiting но другого td
            //соответственно срабатывает сразу событие  $(document).on('click', '.hours_waiting'), что надо предотвратить, off('click') не помогает`

Answer 1

Для удаления обработчика события используется off описание работы: http://api.jquery.com/off/

function flash() { 
  $( "div" ).show().fadeOut( "slow" ); 
} 
$( "#bind" ).click(function() { 
  $( "body" ) 
    .on( "click", "#theone", flash ) 
    .find( "#theone" ) 
      .text( "Can Click!" ); 
}); 
$( "#unbind" ).click(function() { 
  $( "body" ) 
    .off( "click", "#theone", flash ) 
    .find( "#theone" ) 
      .text( "Does nothing..." ); 
});

  button { 
    margin: 5px; 
  } 
  button#theone { 
    color: red; 
    back

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<!doctype html> 
<html lang="en"> 
<head> 
  <meta charset="utf-8"> 
  <title>off demo</title> 
</head> 
<body> 
  
<button id="theone">Does nothing...</button> 
<button id="bind">Add Click</button> 
<button id="unbind">Remove Click</button> 
<div style="display:none;">Click!</div> 
  
</body> 
</html>