Question

我刚刚在这里阅读了这个示例中的Change（）事件，但是并没有完全遵循这里对change（）的双重使用。文档说明了“将一个更改事件附加到选择中，获取每个选定选项的文本并将其写入div。然后触发事件以进行初始文本绘制。” 请详细说明最后一行!!

   <html lang="en">
        <head>
          <meta charset="utf-8">
          <title>change demo</title>
          <style>
          div {
            color: red;
          }
          </style>
          <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        </head>
        <body>

        <select name="sweets" multiple="multiple">
          <option>Chocolate</option>
          <option selected="selected">Candy</option>
          <option>Taffy</option>
          <option selected="selected">Caramel</option>
          <option>Fudge</option>
          <option>Cookie</option>
        </select>
        <div></div>

        <script>
        $( "select" )
          .change(function () {
            var str = "";
            $( "select option:selected" ).each(function() {
              str += $( this ).text() + " ";
            });
            $( "div" ).text( str );
          })
          .change();
        </script>

        </body>
    </html>

Answer 1

它只是触发change事件，以初始化div上的文本。由于所有逻辑都在变更监听器内。侦听器从选择中读取所有选定的选项并将其写入div。但是，只有在发生更改事件或您自己触发事件时，侦听器才会触发。将听众视为要执行的操作。它在相关事件发生时执行。这种情况下的操作是将所选选项写入div文本。

由于我们从一开始就不想要一个空盒子，我们会调用监听器（动作）来为我们做，而不是重写动作。

同样重要的是要注意.change将返回从中调用它的jQuery对象。所以你可以像这样链接它：

$('select').change(function() { /*do something*/ }).change(function() { /*doSomething else*/ }).change(); //and so on.

Answer 2

$("select") // this line is the selector
    .change(function () {  // this line starts adding the change event handler
    var str = "";
    $("select option:selected").each(function () {
        str += $(this).text() + " ";
    });
    $("div").text(str);
})
    .change();// this line then triggers that event handler (from the chained selector).

同样的效果来自：

$("select").change(function () {
    var str = "";
    $("select option:selected").each(function () {
        str += $(this).text() + " ";
    });
    $("div").text(str);
});
$("select").change();

或者这个：

$("select")
    .change(function () {
    var str = "";
    $("select option:selected").each(function () {
        str += $(this).text() + " ";
    });
    $("div").text(str);
});
$("select").trigger('change');

为什么首先要做的是它使用链接，因此不必多次为选择器选择（找到）元素。它还确保您的处理程序在被触发之前完全添加。

注意：事件处理程序在被用户手动触发时执行，或者从此处手动触发该处理程序的代码触发时执行。

注意：在jQuery中，空.change()是一个触发器，并且不会添加新函数，因为第一个中没有任何内容。

不清楚使用change（）函数，如示例中所述 - Jquery

2 个答案: