有一个选择框，这个选择框根据每个选择的案例改变文本框的值和属性。和一个名为 add record 的 div 以添加新记录。问题是当一条新记录添加了用于更改文本框的代码不适用于新记录时。有没有办法解决它？ 这是我的代码:
$(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>最佳答案
已经绑定(bind)的事件对于新添加的元素是不可见的。在您的情况下，您可以绑定(bind)到 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>关于javascript - Onchange 方法不适用于更改文本框的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41692439/