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

时间:2017-11-15 10:06:55

标签: javascript jquery events select parameters

当我通过&lt; select&gt; element作为jQuery事件的参数(使用触发器),事件处理程序只获取第一个&lt; option&gt;那个&lt; select&gt;。这是一个错误还是我做错了什么? 我写了一个简单的片段来说明它。  请在控制台中查看输出。 &#13; &#13; var onInputMounted = function(e,data){&#13;   console.log(&#34;已挂载&#34;,数据);&#13; };&#13; &#13; var onInputUnmounted = function(e,data){&#13;   console.log(&#34;未安装&#34;,数据);&#13; };&#13; &#13; var observer = new MutationObserver(function(changes){&#13;   changes.forEach(function(element,index){&#13;     var allChangedNodes = [];&#13;     var allChangedInputs = [];&#13; &#13;     if(element.type ===&#34; childList&#34;){&#13;       //全部更改(添加/删除)HTML节点&#13;       if(element.addedNodes.length&gt; 0){&#13;         allChangedNodes = Array.prototype.slice&#13;           .CALL(element.addedNodes)&#13;           .map(function(e,i){&#13;             返回{&#13;               节点:e,&#13;               事件:&#34;已安装&#34;&#13;             };&#13;           });&#13;       } else if(element.removedNodes.length&gt; 0){&#13;         allChangedNodes = Array.prototype.slice&#13;           .CALL(element.removedNodes)&#13;           .map(function(e,i){&#13;             返回{&#13;               节点:e,&#13;               事件:&#34;未安装&#34;&#13;             };&#13;           });&#13;       }&#13; &#13;       //全部改变(添加/删除)HTML:输入字段&#13;       allChangedInputs = allChangedNodes&#13;         .map(function(e){&#13;           返回$(e.node)&#13;             .find(&#34;:输入&#34)&#13;             .addBack(&#34;:输入&#34)&#13;             .map(function(i,input){&#13;               返回{&#13;                 输入:输入,&#13;                 事件:e.event&#13;               };&#13;             });&#13;         })&#13;         .reduce(function(arrLike1,arrLike2){&#13;           var arr1 = Array.prototype.slice.call(arrLike1);&#13;           var arr2 = Array.prototype.slice.call(arrLike2);&#13;           return arr1.concat(arr2);&#13;         });&#13;     }&#13; &#13;     //触发相应的事件:挂载(用于添加输入),卸载(用于删除的)&#13;     for(var i = 0; i&lt; allChangedInputs.length; i ++){&#13;       console.log(&#34;触发&#34;,allChangedInputs [i]);&#13;       $(&#34;#容器&#34)的触发器(&#13;         allChangedInputs [I] .event,&#13;         allChangedInputs [I]。输入&#13;       );&#13;     }&#13;   });&#13; });&#13; &#13; //注册活动&#13; $(&#34;#container&#34;)。on(&#34;已挂载&#34;,onInputMounted);&#13; $(&#34;#container&#34;)。on(&#34; unmounted&#34;,onInputUnmounted);&#13; &#13; //观察DOM&#13; observer.observe($(&#34;#container&#34;)[0],{&#13;   childList:true,&#13;   子树:true,&#13;   attributes:false,&#13;   characterData:false&#13; });&#13; &#13; //附加一个带有两个输入的div&#13; $(&#34;#容器&#34)。追加(&#13;   &#39;&lt; div&gt;&lt; input id =&#34; name&#34; /&gt;&lt; select id =&#34; gender&#34;&gt;&lt; option value =&#34; male&#34;&gt; male&lt; / option&gt;&lt; option value =&#34; female&#34 ;&GT;雌性&LT; /选项&GT;&LT; /选择&GT;&LT; / DIV&GT;&#39;&#13; );&#13; &lt; script src =&#34; https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt; / script&gt;&#13; &lt; div id =&#34; container&#34;&gt;&lt; / div&gt;&#13; &#13; &#13; 我触发事件&#34;已安装&#34;并且&#34;未安装&#34;像这样: $(&#34;#容器&#34)。触发器(    allChangedInputs [I] .event,    allChangedInputs [I]。输入 ); allChangedInputs [i] .input是已添加(挂载)/删除(未挂载)的HTML输入 问题是此输入是&lt; select&gt;事件处理程序仅将其作为&lt; option&gt;接收。任何线索? 谢谢!

1 个答案:

答案 0 :(得分:0)

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

只需将其转换为

[allChangedInputs[i].input]

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

&#13;
&#13;
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>'
);
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>
&#13;
&#13;
&#13;