Question

有选择框，此选择框根据所选的每个案例更改文本框的值和属性。和一个名为添加记录的div添加新记录。问题是当新记录添加了更改文本框的代码不适用于新记录时。有没有办法解决它？这是我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

对于新添加的元素，已经绑定的事件不可见。在您的情况下，您可以绑定到document的事件。当您向document添加事件时，它也将通过脚本触发新添加的元素。 $(document).on('change', 'select[name=type]', function(){ });

示例

＆＃13;
＆＃13;
$(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')); }); });
＆＃13;
.to_validate:invalid { color: navy; outline: none; border-color: #ff1050 !important; box-shadow: 0 0 10px #ff0000 !important; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Onchange方法不能改变文本框的值

1 个答案: