jQuery mouseup() 问题答案

【问题标题】：jQuery mouseup() issuejQuery mouseup() 问题
【发布时间】：2022-10-25 15:03:20
【问题描述】：

我确定这是我想念的简单事情，但我不知所措。

我有这个 jQuery 块：

jQuery("span.frm_inline_total").digits();
  jQuery(".frm_input_group").on("blur", "input", function () {
    jQuery("span.frm_inline_total").digits();
  });

  jQuery(".frm_range_container input").mouseup(function () {
    jQuery("span.frm_inline_total").digits();
    console.log("mouse up");
  });
  jQuery(".frm_range_container input").mousedown(function () {
    jQuery("span.frm_inline_total").digits();
    console.log("mouse down");
  });

这会调用一个函数来在某些字段编号中放置逗号。我认为这无关紧要，但功能如下：

 jQuery.fn.digits = function () {
    return this.each(function () {
      jQuery(this).text($(this).text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));
    })
  }

我的问题是这个。一切正常，除非我尝试使用 mouseup() 调用 digits()。它使用“console.log”记录 mouseup() 事件，并且 mousedown() 事件正常工作，但没有 mouseup()。 ...alert("mouse up") 有效，但不是“数字”。

对于它的价值，我将此事件放在我正在编辑的拖放网站中的内置滑块上。我的“开发”仅限于客户端代码。它上面已经有一个事件来检索我认为可能会干扰的新值，但是我不明白为什么它会触发日志或警报。

【问题讨论】：

您正在使用jQuery 来定义jQuery，但您也在数字函数$(this).text().replace(...) 中使用$，也许这就是问题所在？它是否记录任何错误？
我全都赚了，对不起。还是没有骰子。我的临时解决方案是添加延迟 <code>$(".frm_range_container input").change(function(){ setTimeout(function() { $("span.frm_inline_total").digits(); }, 20); });</code>

标签： javascript jquery

【解决方案1】：

假设您的 HTML 结构是这样的：

  <div class="frm_range_container">
    <div class="frm_input_group">
      <span class="frm_inline_total">Value to replace</span>
      <input value="Click me"></input>
    </div>
  </div>

并且您的其余代码可以正常工作，更改如下代码应该会产生所需的输出。

// added logs to check in console, digits function is the same
$.fn.digits = function () {
    console.log('digits'); // test to see if reaches digits() function
    return this.each(function () {
      // this should be the correct element.
      $(this).text(
          $(this).text().replace(/(d)(?=(ddd)+(?!d))/g, "$1,")
      );
  })
}

$(".frm_range_container input").on('mouseup mousedown', function (e) {
   console.log(e.type);
   $("span.frm_inline_total").digits();
});

如果您只想定位每个frm_range_container 中包含的span.frm_inline_total，则可以使用$("span.frm_inline_total", this).digits();

【讨论】：