我似乎无法解决这个问题，两个小时左右后我放弃了。我对javascript一点都不好。
这是一个jfiddle，我在这里发现了一个很好的jquery：
[html]
<button id="addProduct">Add Product</button>
<div id="someContainer"></div>
<span></span>
[javascript]
var i = 1;
$("#addProduct").click(function() {
$("<div />", { "class":"wrapper", id:"product"+i })
.append($("<input />", { type: "text", id:"name"+i }))
.append($("<input />", { type: "text", id:"property"+i }))
.appendTo("#someContainer");
i++;
});
$("input").live("click", function() {
$("span").text("Clicked ID: " + this.id);
});
它附加两个具有唯一ID的新输入。现在我想做的是使用on（）在“焦点”时重置不同输入的值。问题是，我希望它清除其相应的输入，例如专注于“id = name1”将重置“id = property2”，反之，聚焦“id = name2”会重置“id = property2”反之亦然上...
所以我加入了它：
var i = 1;
$("#addProduct").click(function() {
$("<div />", { "class":"wrapper", id:"product"+i })
.append($("<input />", { type: "text", class:"name"+i }))
.append($("<input />", { type: "text", class:"property"+i }))
.appendTo("#someContainer");
$("#product"+i).on("focus", $(".name"+i), function() {
$(".property"+i).val("");
});
$("#product"+i).on("focus", $(".property"+i), function() {
$(".name"+i).val("");
});
i++;
});
但无论出于何种原因，我都无法重置这些输入。该函数似乎忽略了递增值。如果我删除var i它似乎工作但然后它清除我的所有输入。在类的末尾逻辑添加“+ i”应该可以解决问题，但事实并非如此。我尝试过使用不同形式的选择：
$("#product"+i).find(".name"+i);
但这似乎也没有帮助。我真的不明白这有什么问题。如果有人可以提供帮助，我将非常感谢。
答案 0 :(得分：1)
尝试以下
$('#someContainer').on("focus", 'input[clas^="name"],input[class^="property"]',function() {
$(this).siblings().val("");
});
演示：https://jsfiddle.net/Le81qo5h/1/
或更好地删除计数器＆amp;将ID更改为类：
$("#addProduct").click(function() {
$("<div />", { "class":"wrapper", class:"product"})
.append($("<input />", { type: "text", class:"name"}))
.append($("<input />", { type: "text", class:"property" }))
.appendTo("#someContainer");
});
$('#someContainer').on("focus", '.name,.property',function() {
$(this).siblings().val('');
});
答案 1 :(得分：1)
不要尝试使用增量ID来做这样的事情。相反，使用类。用这种方式处理动态元素要容易得多。请参阅以下示例：
$("#addProduct").click(function() {
$("<div />", { "class":"wrapper", class:"product"})
.append($("<input />", { type: "text", class:"name" }))
.append($("<input />", { type: "text", class:"property" }))
.appendTo("#someContainer");
});
$('#someContainer').on('click', '.name, .property', function() {
var $this = $(this);
var $otherInput = $this.parent().find('.name, .property').not($this).val('');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="addProduct">Add Product</button>
<div id="someContainer"></div>
<span></span>
首先，此处理程序侦听#someContainer元素内的任何点击。当听到咔嗒声时，它会检查被点击的元素是否具有name或property类，如果有，则调用该函数。
$('#someContainer').on('click', '.name, .property', function() {
});
接下来，我们将this缓存为jQuery对象。这是点击的元素。
var $this = $(this);
现在我们有：
$this.parent().find('.name, .property').not($this).val('');
$this.parent()获取所点击元素的父级.find('.name, .property')发现该父母的任何孩子都有name或property类.not($this)从匹配的元素中排除被点击的元素val('')清除所有匹配元素的值，在这种情况下只有一个请注意，madalin ivascu对.siblings().val("");的使用更为简洁。老实说，我忘记了它，虽然如果你以后有更多的元素并且不想清除一些元素，这种方式会更灵活。
第一个问题是处理程序的绑定。你有：
$("#product"+i).on("focus", $(".name"+i), function() {
//.....
});
如果您查看docs for .on()，则会对第二个参数说明以下内容：
选择
输入：字符串
用于过滤触发事件的所选元素的后代的选择器字符串。如果选择器为null或省略，则事件始终在到达所选元素时触发。
您正在传递一个jQuery对象$(".name"+i)，但这应该是一个字符串，所以只需".name"+i这样：
$("#product"+i).on("focus", ".name"+i, function() {
//.....
});
第二个问题是增量i存在缺陷的逻辑。让我们来看看原因：
var i = 1; // here we set i to 1, cool
$("#addProduct").click(function() {
$("<div />", { "class":"wrapper", id:"product"+i })
.append($("<input />", { type: "text", class:"name"+i }))
.append($("<input />", { type: "text", class:"property"+i }))
.appendTo("#someContainer");
// the 3 lines above all use i and i=1, so far so good
$("#product" + i).on("focus", ".name" + i, function() { // for clarity, I have corrected this line, again, here i=1 so we're fine
$(".property" + i).val(""); // here is the issue, but we'll come back to this...
});
//..... other code....
i++; // here we increment i so now, i=2 , seems ok, but it's not
});
所以我们现在知道问题在于嵌套处理程序。以下是发生的事情：
当我们绑定处理程序时，会立即评估i，并且在此行上i = 1
$("#product" + i).on("focus", ".name" + i, function() {
//....
});
但是，在用户点击$("#product1") 之后，处理程序中的代码才会执行，这将在我们增加i 之后
这意味着，当以下行运行时，i将始终比添加到页面的最后一个元素高一个数字。因此，即使您修复了选择器，您也将尝试清除不存在的元素
$(".property" + i).val(""); // i here will always be the newest value for i
// NOT the value of i when the handler was attached
运行以下代码段并观察控制台输出以查看我的意思：
var i = 1;
$("#addProduct").click(function() {
$("<div />", { "class":"wrapper", id:"product"+i })
.append($("<input />", { type: "text", class:"name"+i }))
.append($("<input />", { type: "text", class:"property"+i }))
.appendTo("#someContainer");
$("#product" + i).on("focus", ".property" + i, function() {
console.log(".property" + i);
});
$("#product" + i).on("focus", ".name" + i, function() {
console.log(".name" + i);
});
i++;
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="addProduct">Add Product</button>
<div id="someContainer"></div>
<span></span>