JavaScript更改函数只触发一次

Question

我很努力地理解为什么jQuery函数“on change”只能为每行工作一次。代码我已经完美地适用于对每行进行多处更改，但是当我更改“相反值”时，代码将失败。

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

有没有办法改变它？我尝试使用.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

我设法用

$(".line input").on("change", func...);，而不是你的代码，也是，如果别人来改变事件访问选择器阻止，它现在似乎工作。

敬请参见下面的代码片段

$(".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

Answer 2

此代码工作的小提琴：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()); 
    } 
});