Question

我已经在JS中为我的jquery插件编写了一些代码。在编写脚本时我遇到了奇怪的问题，即Jquery方法change()继续重复x + 2次（意味着如果我第一次点击元素这个工作很好，在铬控制台我看到一个输出，但当我第二次在控制台中的同一元素上点击我看三个输出，如果我在控制台第三次点击我看了5次）。

首先点击：http://i.stack.imgur.com/UZ7g5.png。

第二次点击：http://i.stack.imgur.com/c8zbD.png

我在jsbin.com/xiyala/edit?html,js,console,output中粘贴了我的一小段代码，你也可以在控制台中观看。

在此处粘贴在代码段中的相同代码中

$(document).ready(function() {

    var cont = $("<div class='txtbrCont tetb_1  _txb01 sng_01'></div>");
    var FS = $("<select id='slcvluimp' class = 'a2sdf1 sdf45a1 srlize tetb_5  _txb05 sng_05 cmncls'>" +
      "<option value='0op'>Font Size</option>" +
      "<option value='6pt'>6pt</option>" +
      "<option value='8pt'>8pt</option>" +
      "<option value='10pt'>10pt</option>" +
      "<option value='12pt'>12pt</option>" +
      "<option value='16pt'>16pt</option>" +
      "<option value='18pt'>18pt</option>" +
      "<option value='24pt'>24pt</option>" +
      "</select>");
    cont.append(FS);
    $("#appendTome").append(cont);
cont.on("click", function(e) {
  var value1 = "1";
  switch (value1) {
    case ("1"):
      $(".tetb_5").on("change", function() {
        getSelectOptionValue();
      });
    break;   
    case ("2"):
      console.log("hello world");
    break;
    default:
  }
});
function getSelectOptionValue() {
  var one = null;
  one = $("._txb05" + " option:selected").text();
  console.log(one);
  return one;
}

});

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id="appendTome"></div>
</body>
</html>

Answer 1

你永远不应该把事件放在另一个事件中，因为每当你第一个事件发生时它都会被附加，并且这会导致你的问题：

cont.on("click", function(e) { <-- First Event
  var value1 = "1";
  switch (value1) {
    case ("1"):
      $(".tetb_5").on("change", function() { <-- Second Event inside it
        getSelectOptionValue();
      });
    break;   
    case ("2"):
      console.log("hello world");
    break;
    default:
  }
});

在change事件处理程序的代码之外分配click事件处理程序，如下面评论中提到的@Pointy：

$(".tetb_5").on("change", function() {
    getSelectOptionValue();
});

cont.on("click", function(e) {
  var value1 = "1";
  switch (value1) {
    case ("1"):
       //Not sure what you want to do here
    break;   
    case ("2"):
      console.log("hello world");
    break;
    default:
  }
});

希望这有帮助。

Answer 2

以下代码中有2个触发器：

cont.on("click", function(e) {
  var value1 = "1";
  switch (value1) {
    case ("1"):
      $(".tetb_5").on("change", function() {
        getSelectOptionValue();
      });
    break;   
    case ("2"):
      console.log("hello world");
    break;
    default:
  }
});

cont上的一个和$(".tetb_5")上的一个

如果您尝试选择一次，然后使用箭头键更改选择，则可以使用，因为您只是激活了$(".tetb_5")

你应该只有：

$(document).ready(function() {
    var cont = $("<div class='txtbrCont tetb_1  _txb01 sng_01'></div>");
    var FS = $("<select id='slcvluimp' class = 'a2sdf1 sdf45a1 srlize tetb_5  _txb05 sng_05 cmncls'>" +
      "<option value='0op'>Font Size</option>" +
      "<option value='6pt'>6pt</option>" +
      "<option value='8pt'>8pt</option>" +
      "<option value='10pt'>10pt</option>" +
      "<option value='12pt'>12pt</option>" +
      "<option value='16pt'>16pt</option>" +
      "<option value='18pt'>18pt</option>" +
      "<option value='24pt'>24pt</option>" +
      "</select>");
    cont.append(FS);
    $("#appendTome").append(cont);
      $(".tetb_5").on("change", function() {
        getSelectOptionValue();
      });
});

function getSelectOptionValue() {
  var one = $("._txb05" + " option:selected").text();
  console.log(one);
  return one;
}

单击Jquery change（）方法重复（x + 2）

2 个答案: