Блог

Главная - Вопросы по программированию - jQuery .click(обработчик) находит пустой элемент ввода в скрипте Greasemonkey (addEventListener, однако, работает)

jQuery .click(обработчик) находит пустой элемент ввода в скрипте Greasemonkey (addEventListener, однако, работает)

#javascript #jquery #dom-events #greasemonkey

#javascript #jquery #dom-события #greasemonkey

Вопрос:

У меня есть скрипт Greasemonkey, который выполняет некоторую связь между JIRA и приложением ticket. Когда вы связываете элемент с билетом JIRA, он отправляет некоторые сообщения API в JIRA, чтобы добавить другой билет в JIRA, чтобы он был двунаправленным. Соответствующий HTML (который я не могу изменить)::

 <div id="related_inputs" class="related-items-actions-inner">
    <label class="align" style="width: 104px;">full_jira_url: </label>
    <input type="text" style="margin-left: 109px;">
    <br>
</div>

И кнопка:

 <a id="relate-button" class="tt_button">
  <span id="relate-button-text">Relate</span>
</a>

Поэтому, по сути, когда пользователь нажимает кнопку / ссылку, я хочу извлечь значение, введенное во вводе выше (в div «связанные входы»), а затем выполнить некоторые другие действия. Раньше он работал и больше не работает, поэтому я не уверен, связано ли это с регрессией браузера, изменением JIRA или изменением кода веб-сайта, для которого я пишу сценарий.

Суть скрипта Greasemonkey заключается в:

 (function () {
  console.log("Started script!");

  $('#relate-button').click( function(event) {

    var related_ticket_type = $('#related_inputs label').text().trim();
    console.log("ticket type is "   related_ticket_type);
    if (related_ticket_type != JIRA_LABEL_TEXT) { 
      return;
    }

    var jira_url = $('#related_inputs input').val();
    console.log(jira_url);  // <<== this is "" all the time now even when the input has data in it when pressed
    
    var match = jira_url.match(JIRA_REGEX);

    if (match.length != 2) {
      console.log("We didn't match the URL to a valid RDS Jira url.")
      return;
    }
    ...

Проблема в том, что значение, которое я получаю от элемента ввода, каждый раз пустое. Я подтвердил в консоли, что это правильный элемент ввода. Элемент label является правильным, поскольку он попадает во входной код.

Есть идеи или предложения?

После того, что я обнаружил ниже, вопрос сводится к следующему: в чем разница между jQuery .click(handler) и vs element.addEventListener( 'click', function(event) {...}, true) ?

Комментарии:

1. Какая версия Greasemonkey? GM 2 добавил несколько вещей. Каков ваш блок метаданных? (лучше всего также ссылаться на весь скрипт) войдите в консольный журнал $('#related_inputs input') и трижды проверьте, что это ожидаемый узел.

2. Да, определенно найден правильный узел, просто из-за какой-то проблемы с синхронизацией значение =»», даже если при вводе текста в нем есть текст во время нажатия на ссылку. addEventListener решил это, хотя я не знаю почему.

3. Аргх, поэтому я использовал .on(‘щелчок’… и делегат для прикрепления события к внешнему div, просто если веб-сайт выполнял некоторый AJAX, но он по-прежнему обнаруживает, что поле ввода текста пустое (метка всегда правильная, и в div есть только один ввод, поэтому объект ввода правильный, только с пустым значением =»»). Есть другие идеи?

Ответ №1:

Поэтому вместо использования jquery .click(обработчика) я сделал следующее:

 var button_el = document.getElementById('relate-button');

button_el.addEventListener( 'click', function(event) {....}, true);

Это устранило проблему (т.Е. Значение url не было пустым). Тем не менее, мне было бы действительно интересно узнать, почему это устранило мою проблему.

Я использую Greasemonkey 1.15.

Метки: , ,