JQuery как написать функцию, которая будет срабатывать при выполнении другой (уже встроенной в JQuery) функции?

381

11 сентября 2017, 06:32

Если использовать val(), то on('change') не работает. Я хочу написать функцию, которая вызывается после выполнения val(), в ней проверяется - у какого элемента была вызвана val(). И если это нужный мне элемент, то происходит trigger('change'). Как такое сделать?

Answer 1

Необязательно придумывать какую-то новую функцию. Достаточно после вызова функции val() дописать .trigger('change') (или просто .change()) - это "даст сигнал" вашему обработчику события change и выполнит код, описанный в нем:

$('button').on('click', function() { 
  $('input').val(str_rand()).trigger('change'); 
}); 
 
/* ДЛЯ ДЕМОНСТРАЦИИ */ 
var changed = 0; 
$('.input').on('change', function() { // обработчик change 
  changed++; 
  $('.changed').text('Изменено ' + changed + ' раз'); 
}); 
 
function str_rand() { // случайный набор символов 
  var result = ''; 
  var words = '0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM'; 
  var max_position = words.length - 1; 
  for (i = 0; i < 5; ++i) { 
    position = Math.floor(Math.random() * max_position); 
    result = result + words.substring(position, position + 1); 
  } 
  return result; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type="text" class="input" /><br /> 
<button class="val1">val()</button> 
<div class="changed"></div>

Если же возможности прописать триггер нет (например, если функция .val() вызывается из стороннего скрипта), можно немного переписать функцию .val():

var oldVal = $.fn.val; // переопределяем функцию .val() 
$.fn.oldVal = oldVal; // на .oldVal() 
$.fn.val = function(value) { // и определяем новый функционал .val() 
  if (!value) { 
    return this.oldVal(); 
  } else { 
    return this.each(function() { 
      $(this).oldVal(value); // тоже, что и "старая" .val() 
      $(this).trigger('change'); // вызывает триггер 
    }); 
  } 
}; 
 
/* ДЛЯ ДЕМОНСТРАЦИИ */ 
$('button').on('click', function() { 
  $('input').val(str_rand()); 
}); 
 
var changed = 0; 
$('.input').on('change', function() { // обработчик change 
  changed++; 
  $('.changed').text('Изменено ' + changed + ' раз'); 
}); 
 
function str_rand() { // случайный набор символов 
  var result = ''; 
  var words = '0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM'; 
  var max_position = words.length - 1; 
  for (i = 0; i < 5; ++i) { 
    position = Math.floor(Math.random() * max_position); 
    result = result + words.substring(position, position + 1); 
  } 
  return result; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type="text" class="input" value="val" /> 
<button class="change">val()</button> 
<div class="changed"></div>

Решение, как оказалось, лежало в этом ответе.

Как вариант, но, наверное, самый неправильный - можно запустить постоянную проверку через setTimeout().

ВАЖНО учитывать, что такой вариант довольно сильно нагрузит браузер, вследствие чего снизится производительность.

$('.input').each(function() { 
  var inp = $(this), 
    old = inp.val(); // старое value 
  setInterval(function() { 
    if (inp.val() !== old) { // если новое value не равно старому 
      inp.trigger('change'); // вызываем триггер 
      old = inp.val(); // и переписываем старое value 
    } 
  }, 100); 
}); 
 
/* ДЛЯ ДЕМОНСТРАЦИИ */ 
$('button').on('click', function() { 
  $('input').val(str_rand()); 
}); 
 
var changed = 0; 
$('.input').on('change', function() { // обработчик change 
  changed++; 
  $('.changed').text('Изменено ' + changed + ' раз'); 
}); 
 
function str_rand() { // случайный набор символов 
  var result = ''; 
  var words = '0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM'; 
  var max_position = words.length - 1; 
  for (i = 0; i < 5; ++i) { 
    position = Math.floor(Math.random() * max_position); 
    result = result + words.substring(position, position + 1); 
  } 
  return result; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type="text" class="input" value="val" /> 
<button class="change">val()</button> 
<div class="changed"></div>

Создание Интернет магазина Ивано-Франковск

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Многоразовый печатающийся текст. Как в VN

Читали визуальные новеллы? Текст появляется по одной букве и происходить это должно неограниченное кол-во разНапример

293

javascript

Кроссдоменный post запрос

Подскажите пожалуйста, как с помощью ajax, jq отправить кроссдоменный пост запрос для логина? Как передать нужные header?

339

javascript

Как отобразить элемент из многомерного json?

Есть jsonnationality

306

javascript

Использование JS для фронт-энда в Django

Делаю на Django сайт, с бэк эндом все вроде ясно, но я хочу сверстать красивую хорошие странички, а для этого мне нужен JS, подскажите как мне подключить...

309