jQuery .click(handler) 在 Greasemonkey 脚本中发现输入元素空白（但是 addEventListener 有效）答案

【问题标题】：jQuery .click(handler) finds input element blank in Greasemonkey script (addEventListener works, however)jQuery .click(handler) 在 Greasemonkey 脚本中发现输入元素空白（但是 addEventListener 有效）
【发布时间】：2014-06-27 18:20:37
【问题描述】：

我有一个 Greasemonkey 脚本，它在 JIRA 和票务应用程序之间进行了一些关联。当您将项目与 JIRA 票证相关联时，它会向 JIRA 发布一些 API，以将其他票证添加到 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;
    }
    ...

问题是我从输入元素获得的值每次都是空的。我已经在控制台中确认它是正确的输入元素。标签元素是正确的两个，因为它正在获取输入代码。

有什么想法或建议吗？

根据我在下面的发现，问题归结为：jQuery 的 .click(handler) 与 element.addEventListener( 'click', function(event) {...}, true) 有什么区别？

【问题讨论】：

什么版本的 Greasemonkey？ GM 2 FUBAR'd 了一些东西。你的元数据块是什么？（最好也链接到整个脚本）控制台日志$('#related_inputs input') 并三次检查它是否是预期的节点。
是的，肯定找到了正确的节点，只是由于一些同步问题，即使在单击链接时文本输入中有文本，value="" 也是如此。 addEventListener 解决了，虽然我不知道为什么。
Arggh，所以我使用 .on('click'... 和一个委托将事件附加到外部 div 以防网站正在执行一些 AJAX，但它仍然发现文本输入字段为空白（标签始终正确，并且 div 中只有一个输入，因此输入对象是正确的，只是带有空白值 =“”）。还有其他想法吗？

标签： javascript jquery dom-events greasemonkey

【解决方案1】：

因此，我没有使用 jquery 的 .click(handler)，而是执行了以下操作：

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

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

这样做解决了问题（即 url 的值是 not 空白）。不过，我真的很想知道为什么这能解决我的问题。

我正在使用 Greasemonkey 1.15。

【讨论】：