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()); 
    } 
});