Question

我试图用jQuery编写一个函数，它将在已经存在的一系列独特输入旁边创建一系列新输入。该函数应该为每个新输入添加事件侦听器，以便每当其值发生变化时（例如，输入某些内容），其旁边的原始输入值具有相同的值。

最终我会隐藏原始表单，以便最终用户只能看到新表单。我这样做是为了能够控制用户可以看到/修改的表单的哪些部分，并且还能够更好地控制表单的外观。我必须做这一切的原因是因为我必须做所有这些是因为我修改了Microsoft Sharepoint项目创建表单，修改它的唯一方法是向页面添加javascript。如果有更好的方法可以做到这一点我全都耳朵。我在编码方面比较新，而且在Sharepoint中编码很新。

无论如何，这就是我所拥有的：

    var inputIdArr = [
    'OrigInput1', 
    'OrigInput2',
    'OrigInput3',
    'OrigInput4',
    'OrigInput5',
    'OrigInput6',
    'OrigInput7'
    ];

function newInputs(arr) {
    for (str in arr) {
        var elem = $( "[id='" + inputIdArr[str] + "']" );
        var parent = elem.parent();
        var newInputId = `newInput${str}`
        var newInput = `<input type='text' id=${newInputId} />`;

        parent.append(newInput);
        $( `[id=${newInputId}]` ).change(function() {
            console.log(newInputId + " changed");
            elem.val($( `[id=${newInputId}]` ).value);
        });
    }
}

$(document).ready(function(){
    newInputs(inputIdArr);
});

目前，控制台始终记录＆＃34; newInput7已更改＆＃34;。我不确定如何修复它以便记录正确的新输入已更改。一旦完成，我还可以使用指导去哪里。

Answer 1

以编程方式跟踪动态创建的元素的生成ID是一种反模式，导致不必要的详细代码和维护问题。

相反，你可以通过简单地使用类和DOM遍历将元素相互分组并将元素相互关联来使逻辑更加简洁和可扩展，如下所示：

You need configured Python 2 SDK to render Epydoc docstrings

$('input.orig').after('<input type="text" class="appended" />');

$('#container').on('input', 'input.appended', function() {
  $(this).prev('.orig').val(this.value);
})

.appended {
  border: 1px solid #C00;
}
input {
  display: block;
  margin: 2px;
}

另请注意，当<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <input type="text" class="orig" /> <input type="text" class="orig" /> <input type="text" class="orig" /> </div> id选择器可用且速度更快时，使用属性选择器按ID查找元素是多余的 - 即使不需要此工作。

Answer 2

这应该让你开始，我已经创建了7个原始字段，并且你的函数成功地创建了新字段。我已经在你的循环之外的新字段中添加了事件或绑定，因为我认为存在一些问题。

＆＃13;

// fields selection
var inputIdArr = [
  'OrigInput1',
  'OrigInput2',
  'OrigInput3',
  'OrigInput4',
  'OrigInput5',
  'OrigInput6',
  'OrigInput7'
];
// function for creating new fields
function newInputs(arr) {
  for (str in arr) {
    var elem = $("[id='" + inputIdArr[str] + "']");
    var parent = elem.parent();
    var newInputId = `newInput${str}`
    var newInput = `<input type='text' id=${newInputId} />`;
    parent.append(newInput);
  }
}
// create new inputs on dom ready
$(document).ready(function() {
  newInputs(inputIdArr);
});

// bind new inputs and send value to org inputs
$(document).on('input', '[id^="newInput"]', function(el){
  $(this).prev().val( $(this).val() );
});

＆＃13;

input:nth-child(1){ border:1px solid red; }
input:nth-child(2){ border:1px solid blue; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div><input type="text" id="OrigInput1"></div>
<div><input type="text" id="OrigInput2"></div>
<div><input type="text" id="OrigInput3"></div>
<div><input type="text" id="OrigInput4"></div>
<div><input type="text" id="OrigInput5"></div>
<div><input type="text" id="OrigInput6"></div>
<div><input type="text" id="OrigInput7"></div>

＆＃13;

将jquery事件侦听器添加到一系列唯一元素中

2 个答案: