jQuery 和 JavaScript 的变化有什么区别？

Question

请问on("change")(jQuery)和.change(JavaScript)有什么区别？

如果有snippets/examples更好理解就好了

Answer 1

这不是特定于 jQuery Mobile，而是 jQuery 框架本身的一部分。

查看更多：https://api.jquery.com/change/

The change event is sent to an element when its value changes. This event is limited to <input> elements, <textarea> boxes and <select> elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.

关于.change()：

This method is a shortcut for .on( "change", handler )

本质上它们是一样的。使用 .on() 有更多的委托选项，因此最好与页面加载时 DOM 中不存在的动态创建的元素一起使用。

考虑以下 HTML：

<div class="form-parts">
  <label for="option-1">Select First Option</label>
  <select id="option-1">
    <option></option>
    <option value="1">Opt 1<option>
    <option value="2">Opt 2<option>
    <option value="3">Opt 3<option>
  </select>
</div>

并考虑以下 jQuery：

$(function(){
  $("#option-1").change(function(){
    console.log("Selected: " + $(this).val());
  });
});

在此示例中，DOM 加载并识别 <select> 元素，因此绑定 change 回调没有问题。现在，如果您想提示用户根据他们选择的 <option> 做出第二个选择，该怎么办？如果您为此动态创建了 <select> 元素，则不会绑定到该新元素。您可以在创建元素时绑定回调：

$("<select>", {
  id: "option-2"
})
.insertAfter($("#option-1"))
.change(function(){
  console.log("Selection 2: " + $(this).val());
});

您还可以使用 .on() 将回调绑定到尚不存在的元素。

$(function() {
  $(".form-parts").on("change", "select", function() {
    switch ($(this).attr("id")) {
      case "option-1":
        console.log("Selection 1: " + $(this).val());
        if ($(this).val() === "2") {
          var s = $("<select>", {
            id: "option-2"
          }).insertAfter(this);
          $("<label>", {
            for: "option-2"
          }).html("Second Option").insertBefore(s);
          $("<option>").appendTo(s);
          $("<option>", {
            value: "0"
          }).html("No").appendTo(s);
          $("<option>", {
            value: "1"
          }).html("Yes").appendTo(s);
        } else {
          $("#option-2").add($("#option-2").prev("label")).remove();
        }
        break;
      case "option-2":
        console.log("Selection 2: " + $(this).val());
        break;
    }
  });
})

.form-parts label {
  padding: 3px 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-parts">
  <label for="option-1">Select First Option</label>
  <select id="option-1">
    <option></option>
    <option value="1">Opt 1</option>
    <option value="2">Opt 2</option>
    <option value="3">Opt 3</option>
  </select>
</div>

在这里您可以看到 change 事件回调更复杂，因为它处理所有当前和潜在的 <select> 元素的变化。

jQuery 和 JavaScript 的变化有什么区别？

What is the difference between change in jQuery and JavaScript?

jquery

jquery-ui

jquery-plugins