JavaScript On Change 函数只触发一次

Question

我正在努力理解为什么jQuery函数"on change"对每行只工作一次。我拥有的代码非常适合对每行进行多次更改，但是当我更改"相反的值"时，代码失败。

我认为这是因为第一个选择器$( ".line" ).children()已经设置，然后没有为每个选择器"取消设置"。我也浏览了以前对类似问题的回答，但没有成功。

有没有办法改变这一点？我尝试使用.unbind()取消设置，但这只会阻止代码在第一次后执行。

$(".line").children().on("change", function(event) {
  console.log($(this).children());
  if ($(this).children().attr("class").includes("picker")) {
    $(this).parent().find(".hex").attr("value", $(this).find(".picker").val());
  } else {
    $(this).parent().find(".picker").attr("value", $(this).find(".hex").val());
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="col-md-12 form">
    <h3>Palette name : <span id="palette_name"></span></h3>
    <div class="line">
      <div class="form-group col-md-5">
        <input type="color" class="form-control picker" value="#ffffff" id="picker1">
      </div>
      <div class="form-group col-md-4">
        <input type="text" class="form-control hex" value="#ffffff" id="hex1">
      </div>
    </div>
    <div class="line">
      <div class="form-group col-md-5">
        <input type="color" class="form-control picker" value="#ffffff" id="picker2">
      </div>
      <div class="form-group col-md-4">
        <input type="text" class="form-control hex" value="#ffffff" id="hex2">
      </div>
    </div>
    <div class="line">
      <div class="form-group col-md-5">
        <input type="color" class="form-control picker" value="#ffffff" id="picker3">
      </div>
      <div class="form-group col-md-4">
        <input type="text" class="form-control hex" value="#ffffff" id="hex3">
      </div>
    </div>
    <div class="line">
      <div class="form-group col-md-5">
        <input type="color" class="form-control picker" value="#ffffff" id="picker4">
      </div>
      <div class="form-group col-md-4">
        <input type="text" class="form-control hex" value="#ffffff" id="hex4">
      </div>
    </div>
  </div>
  <div class="col-md-10">
    <a class="btn btn-info btn-lg">Update</a>
    <a class="btn btn-danger btn-lg pull-right cancel" href="index.html">Cancel</a>
  </div>
</form>

Answer 1

这段代码适用于小提琴：https://jsfiddle.net/uq80uort/

$( ".line" ).children().on("change",function(event){
  console.log($(this).children());
  if ($(this).children().attr("class").includes("picker")) {
    $(this).parent().find(".hex").attr("value",$(this).find(".picker").val());
  } else {
    $(this).parent().find(".picker").attr("value",$(this).find(".hex").val());
  }
});

Answer 2

我设法通过使用更改事件访问器

$(".line input").on("change", func...);而不是您的代码和 if else 选择器块 ，它现在似乎可以工作了。

请看下面的片段

$(".line input").on("change", function(event) {
  
  if ($(this).hasClass("picker")) {
  
    $(this).parents(".line").find(".hex").val( $(this).val());
    
  } else {
  
    $(this).parents(".line").find(".picker").val($(this).val());
    
  }
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="col-md-12 form">
    <h3>Palette name : <span id="palette_name"></span></h3>
    <div class="line">
      <div class="form-group col-md-5">
        <input type="color" class="form-control picker" value="#ffffff" id="picker1">
      </div>
      <div class="form-group col-md-4">
        <input type="text" class="form-control hex" value="#ffffff" id="hex1">
      </div>
    </div>
    <div class="line">
      <div class="form-group col-md-5">
        <input type="color" class="form-control picker" value="#ffffff" id="picker2">
      </div>
      <div class="form-group col-md-4">
        <input type="text" class="form-control hex" value="#ffffff" id="hex2">
      </div>
    </div>
    <div class="line">
      <div class="form-group col-md-5">
        <input type="color" class="form-control picker" value="#ffffff" id="picker3">
      </div>
      <div class="form-group col-md-4">
        <input type="text" class="form-control hex" value="#ffffff" id="hex3">
      </div>
    </div>
    <div class="line">
      <div class="form-group col-md-5">
        <input type="color" class="form-control picker" value="#ffffff" id="picker4">
      </div>
      <div class="form-group col-md-4">
        <input type="text" class="form-control hex" value="#ffffff" id="hex4">
      </div>
    </div>
  </div>
  <div class="col-md-10">
    <a class="btn btn-info btn-lg">Update</a>
    <a class="btn btn-danger btn-lg pull-right cancel" href="index.html">Cancel</a>
  </div>
</form>
Javascript