不要尝试将增量 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
运行下面的 sn-p 并观察控制台输出以了解我的意思：
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>