Jquery change() 方法在点击时重复 (x+2)

Question

我已经用 JS 为我的 jquery 插件编写了一些代码。在编写脚本的过程中，我遇到了一个奇怪的问题，即 Jquery 方法 change() 继续重复 x+2 次（意味着如果我第一次点击元素这个工作很好并且在 chrome 控制台我看到一个输出但是当我第二次点击控制台中的同一个元素时我看到三个输出如果我在控制台中点击第三次我看 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:
  }
});

在 click 事件处理程序的代码之外分配 change 事件处理程序，例如下面评论中提到的@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)

Jquery change() method repeat on click(x+2)

javascript

jquery

dom

jquery-plugins