Lost «нажмите» событие во время AJAX обновления

Question

$(":input").on("change", function(e) { 
 
    console.log("change triggered"); 
 
\t $("#section").html("<button id='order'>Order</button>"); 
 
    registerButtons(); 
 
}); 
 

 
function registerButtons() { 
 
    $("#order").on("click", function(e) { 
 
    \t console.log("click triggered"); 
 
    \t alert("Hello World"); 
 
    }); 
 
    $("#order").on("mousedown mouseup", function(e) { 
 
    \t console.log(e.type + " triggered"); 
 
    }); 
 
} 
 

 
registerButtons();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" value="123"/> 
 
<div id="section"> 
 
    <button id="order">Order</button> 
 
</div>

У меня есть веб-страницу с кнопкой и некоторых полей ввода.

• На кнопке нажмите событие зарегистрировано
• На полях ввода изменение событие зарегистрировано

OnChange будет инициировать вызов сервера AJAX, и результат заменит часть веб-страницы - включая кнопку. После обработки результата AJAX все слушатели регистрируются снова.

Теперь проблема. Пользователь меняет значение поля ввода и нажимает кнопку непосредственно, но для замедления (позволяет предположить, что пользователю требуется 500 мс для клика), так что происходит событие onChange, и страница обновляется/заменяется. Теперь «старая» кнопка запускает onMouseDown, а кнопка «новый» запускает onMouseUp событие - но нет onClick.

Мой текущий обходной путь есть, чтобы зарегистрировать два MouseDown/MouseUp событий, получить временную метку мыши вниз, и если мышь вверх приходит в 2 секунды, делать то, что должно быть сделано OnClick , Невозможно удалить часть кнопки из ответа AJAX - в худшем случае кнопка может быть удалена и заменена информацией пользователя.

Надеюсь, что есть лучшее решение ... любые идеи?

Answer 1

Вы можете воспользоваться возможностью делегирования событий и установить ваш слушатель на контейнере вместо кнопки.

Вы добавляете прослушиватель кликов к своей старой кнопке и добавляете новую кнопку в дом. Таким образом, клик не будет работать.

Кнопка не работала, потому что по какой-то причине она не может сфокусироваться, когда вы наводите на нее курсор. Поэтому я добавил метод getFocus, и теперь он должен работать.

$("input").on("change", function(e) { 
 

 
    console.log("change triggered"); 
 

 
    $("#section").html("<button id='order'>Order</button>"); 
 

 
}); 
 

 

 
function registerButtons() { 
 
    
 
    $('#section').on("mouseup", '#order', function(e) { 
 
     
 
     alert('Clicked!'); 
 
}); 
 

 
} 
 

 
registerButtons();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" value="123"/> 
 
<div id="section"> 
 
    <button id="order">Order</button> 
 
</div>

Я только что узнал, что JQuery обеспечивает сладкий API, который может использоваться для делегирования событий. Таким образом, нам не нужно вручную проверять цель события. Проверьте это http://api.jquery.com/on/

$("input").on("change", function(e) { 
    console.log("change triggered"); 
    $("#section").html("<button id='order'>Order</button>"); 
}); 


    function registerButtons() { 
     $("#section").on("click", '#order', function(e) { 
      console.log("click triggered"); 
      alert("Hello World"); 
    }); 

    $("#section").on('mouseover','#order', function(e){ 
      $(this).focus(); 
    }); 
} 

registerButtons();