Метод Onchange, не работающий над изменением значения текстового поля

, есть selectbox, чтобы этот selectbox изменял значение и атрибут текстового поля на основе каждого выбранного случая. и div, который назвал добавление записи для добавления новой записи. проблема в том, что новая запись добавила, что коды для изменения текстового поля не работают для новой записи. Есть ли способ ее исправить? здесь мои коды:Метод Onchange, не работающий над изменением значения текстового поля

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

Метод Onchange, не работающий над изменением значения текстового поля

ответ

Смежные вопросы