Onboxメソッドがテキストボックスの値を変更する際に機能しない

この選択ボックスが選択された各ケースに基づいてテキストボックスの値と属性を変更するselectboxがあります。新しいレコードを追加するためにaddレコードという名前のdivがあります。問題は、新しいレコードがテキストボックスを変更するためのコードを追加したときに新しいrecord.isのためにそれを修正する方法は動作しない？Onboxメソッドがテキストボックスの値を変更する際に機能しない

$(document).ready(function() { 
 
    $(".add_new").click(function() { 
 
    $(".myform") 
 
    .eq(0) 
 
    .clone() 
 
    .insertAfter(".myform:last") 
 
    .show(); 
 
    }); 
 
}); 
 
$(function(){ 
 
    $('select[name=type]').change(function(){ 
 
    var $option = $(this).find(":selected"); 
 
    $(this).siblings('input.to_validate').attr('pattern', $option.attr('data-pattern')); 
 
    $(this).siblings('input.to_validate').attr('placeholder', $option.attr('data-placeholder')); 
 
    $(this).siblings('input.to_validate').attr('title', $option.attr('data-title')); 
 
    }); 
 
});

.to_validate:invalid { 
 
    color: navy; 
 
    outline: none; 
 
    border-color: #ff1050 !important; 
 
    box-shadow: 0 0 10px #ff0000 !important; 
 
}

<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
<form method="post" class="myform"> 
 
<div> 
 
<select name="type"> 
 
    <option value="NS" data-pattern="(?!\d+(?:\.\d+){3}$)(([a-zA-Z\d]|[a-zA-Z\d][a-zA-Z\d-]*[a-zA-Z\d])\.)*([A-Za-z\d]|[A-Za-z\d][A-Za-z\d-]*[A-Za-z\d])" data-placeholder="Hostname" data-title="Wrong!">NS </option> 
 
    <option value="SRV" data-pattern="(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])" data-placeholder="IP address" data-title="Wrong!">MX </option> 
 
    </select> 
 

 
<input type="text" name="content" placeholder="Value" class="to_validate" value="" /> 
 

 
<button type="submit">submit</button> 
 
</div> 
 
</form> 
 
<div class="add_new">ADD Record</div> 
 

 

 

 

 

 
</body> 
 
</html>

出典

2017-01-17 inaz

すでにバインドイベントは、新規追加要素のために表示されていない：はここに私のコードです。あなたの場合、documentのイベントにバインドすることができます。 documentにイベントを追加すると、スクリプトによって追加された新しい要素に対してもイベントが発生します。 $(document).on('change', 'select[name=type]', function(){ });

例

$(document).ready(function() { 
 
    $(".add_new").click(function() { 
 
    $(".myform") 
 
     .eq(0) 
 
     .clone() 
 
     .insertAfter(".myform:last") 
 
     .show(); 
 
    }); 
 
}); 
 
$(function() { 
 
    $(document).on('change', 'select[name=type]', function() { 
 
    var $option = $(this).find(":selected"); 
 
    $(this).siblings('input.to_validate').attr('pattern', $option.attr('data-pattern')); 
 
    $(this).siblings('input.to_validate').attr('placeholder', $option.attr('data-placeholder')); 
 
    $(this).siblings('input.to_validate').attr('title', $option.attr('data-title')); 
 
    }); 
 
});

.to_validate:invalid { 
 
    color: navy; 
 
    outline: none; 
 
    border-color: #ff1050 !important; 
 
    box-shadow: 0 0 10px #ff0000 !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<form method="post" class="myform"> 
 
    <div> 
 
    <select name="type"> 
 
     <option value="NS" data-pattern="(?!\d+(?:\.\d+){3}$)(([a-zA-Z\d]|[a-zA-Z\d][a-zA-Z\d-]*[a-zA-Z\d])\.)*([A-Za-z\d]|[A-Za-z\d][A-Za-z\d-]*[A-Za-z\d])" data-placeholder="Hostname" data-title="Wrong!">NS</option> 
 
     <option value="SRV" data-pattern="(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])" data-placeholder="IP address" data-title="Wrong!">MX</option> 
 
    </select> 
 
    <input type="text" name="content" placeholder="Value" class="to_validate" value="" /> 
 
    <button type="submit">submit</button> 
 
    </div> 
 
</form> 
 
<div class="add_new">ADD Record</div>

出典

2017-01-17 08:45:53

Onboxメソッドがテキストボックスの値を変更する際に機能しない

答えて

関連する問題