传递 <select> 作为 jQuery 事件的参数

Question

当我将 <select> 元素作为参数传递给 jQuery 事件（使用触发器）时，事件处理程序仅获取该 <select> 的第一个 <option>。这是一个错误还是我做错了什么？

我写了一个简单的片段来演示它。 请在控制台中查看输出。

var onInputMounted = function(e, data) {
  console.log("mounted", data);
};

var onInputUnmounted = function(e, data) {
  console.log("unmounted", data);
};

var observer = new MutationObserver(function(changes) {
  changes.forEach(function(element, index) {
    var allChangedNodes = [];
    var allChangedInputs = [];

    if (element.type === "childList") {
      // get all changed (added/removed) HTML nodes
      if (element.addedNodes.length > 0) {
        allChangedNodes = Array.prototype.slice
          .call(element.addedNodes)
          .map(function(e, i) {
            return {
              node: e,
              event: "mounted"
            };
          });
      } else if (element.removedNodes.length > 0) {
        allChangedNodes = Array.prototype.slice
          .call(element.removedNodes)
          .map(function(e, i) {
            return {
              node: e,
              event: "unmounted"
            };
          });
      }

      // get all changed (added/removed) HTML :input fields
      allChangedInputs = allChangedNodes
        .map(function(e) {
          return $(e.node)
            .find(":input")
            .addBack(":input")
            .map(function(i, input) {
              return {
                input: input,
                event: e.event
              };
            });
        })
        .reduce(function(arrLike1, arrLike2) {
          var arr1 = Array.prototype.slice.call(arrLike1);
          var arr2 = Array.prototype.slice.call(arrLike2);
          return arr1.concat(arr2);
        });
    }

    // trigger the corresponding event: mounted (for added inputs), unmounted (for removed ones)
    for (var i = 0; i < allChangedInputs.length; i++) {
      console.log("trigger", allChangedInputs[i]);
      $("#container").trigger(
        allChangedInputs[i].event,
        allChangedInputs[i].input
      );
    }
  });
});

// register events
$("#container").on("mounted", onInputMounted);
$("#container").on("unmounted", onInputUnmounted);

// observe changes on DOM
observer.observe($("#container")[0], {
  childList: true,
  subtree: true,
  attributes: false,
  characterData: false
});

// append a div with two inputs
$("#container").append(
  '<div><input id="name" /><select id="gender"><option value="male">male</option><option value="female">female</option></select></div>'
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>

我像这样触发“挂载”和“卸载”事件：

$("#container").trigger(
   allChangedInputs[i].event,
   allChangedInputs[i].input
);

其中allChangedInputs[i].input 是 HTML 输入已添加（挂载）/删除（卸载）

问题是当这个输入是<select> 时，事件处理程序只接收<option>。有什么线索吗？

谢谢！

Answer 1

这是因为trigger 方法接受一个数组或一个对象，它试图将allChangedInputs[i].input 转换为一个数组。

只需将其转换为

[allChangedInputs[i].input]

解决您的问题，请参阅下面的演示

var onInputMounted = function(e, data) {
  console.log("mounted", data);
};

var onInputUnmounted = function(e, data) {
  console.log("unmounted", data);
};

var observer = new MutationObserver(function(changes) {
  changes.forEach(function(element, index) {
    var allChangedNodes = [];
    var allChangedInputs = [];

    if (element.type === "childList") {
      // get all changed (added/removed) HTML nodes
      if (element.addedNodes.length > 0) {
        allChangedNodes = Array.prototype.slice
          .call(element.addedNodes)
          .map(function(e, i) {
            return {
              node: e,
              event: "mounted"
            };
          });
      } else if (element.removedNodes.length > 0) {
        allChangedNodes = Array.prototype.slice
          .call(element.removedNodes)
          .map(function(e, i) {
            return {
              node: e,
              event: "unmounted"
            };
          });
      }

      // get all changed (added/removed) HTML :input fields
      allChangedInputs = allChangedNodes
        .map(function(e) {
          return $(e.node)
            .find(":input")
            .addBack(":input")
            .map(function(i, input) {
              return {
                input: input,
                event: e.event
              };
            });
        })
        .reduce(function(arrLike1, arrLike2) {
          var arr1 = Array.prototype.slice.call(arrLike1);
          var arr2 = Array.prototype.slice.call(arrLike2);
          return arr1.concat(arr2);
        });
    }

    // trigger the corresponding event: mounted (for added inputs), unmounted (for removed ones)
    for (var i = 0; i < allChangedInputs.length; i++) {
      console.log("trigger", allChangedInputs[i]);
      $("#container").trigger(
        allChangedInputs[i].event,
        [allChangedInputs[i].input] //this line
      );
    }
  });
});

// register events
$("#container").on("mounted", onInputMounted);
$("#container").on("unmounted", onInputUnmounted);

// observe changes on DOM
observer.observe($("#container")[0], {
  childList: true,
  subtree: true,
  attributes: false,
  characterData: false
});

// append a div with two inputs
$("#container").append(
  '<div><input id="name" /><select id="gender"><option value="male">male</option><option value="female">female</option></select></div>'
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>