Javascript jQuery附加html在第一次之后不起作用

所以我很抱歉这个标题太模糊了，我甚至不知道如何用几个词来表达这个问题

因此，我有一个表单，用于向webstore添加项目。在这种形式中，可以选择添加不同种类的产品，比如说不同尺寸或颜色的服装等等

我只想为第一个品种onload提供一个字段，然后有一个“add”按钮为每个进一步需要的品种显示一个额外的字段

单击“添加”按钮后，旧的“添加”按钮将变为“减法”按钮，新的输入字段以及新的“添加”按钮将附加到上一个按钮

我希望这个过程能够持续工作

当添加第一个新字段时，该过程可以完美地工作，但是，添加其他元素并不能按预期工作。添加新字段和新的添加按钮，但是旧的添加按钮不会转换为减法按钮。我真的不知道这里有什么问题。我不是一个真正的jquery向导

以下是表格的相关部分：

<label for="varieties">Varieties</label><input type="text" name="varieties[]" id="varieties1" value="Default" /> <a href="#" class="add-variety"><img src="../img/plus.png" alt="Add" title="Add Another Variety" /></a><br />

品种

下面是我写的jquery：

    $('a.add-variety').click(function() {
    $(this).removeClass('add-variety');
    $(this).addClass('subtract-variety');
    $(this).append('<br /><input type="text" name="varieties[]" value="Default" /> <a href="#" class="add-variety"><img src="../img/plus.png" alt="Add" title="Add Another Variety" /></a>');
    $(this).children('img').attr('src','../img/minus.png');
    return false;
});

$（'a.add-variety'）。单击（函数（）{
$（this.removeClass（'add-variety'）；
$（this.addClass（'subtract-variety'）；
$（this.append（“
”）；
$（this.children（'img'）.attr（'src'，'../img/minus.png'）；
返回false；
});

---

非常感谢你的帮助

对不起，我还没有回答你的问题，但是有一个问题让我很烦

“预加”减法按钮不是更有意义吗？因此，您的代码将是：

$('a.add-variety').click(function() {
$(this).prepend('<input type="text" name="varieties[]" value="Default" /> <a href="#" class="subtract-variety"><img src="../img/minus.png" alt="Reomve" title="Remove a Variety" /></a><br/>');

$（'a.add-variety'）。单击（函数（）{
$（this.prepend（“
”）；

}))

---

我认为您不需要在这个jQuery块中“返回”任何内容。

很抱歉，我还没有回答您的问题，但是有一个查询让我很烦

“预加”减法按钮不是更有意义吗？因此，您的代码将是：

$('a.add-variety').click(function() {
$(this).prepend('<input type="text" name="varieties[]" value="Default" /> <a href="#" class="subtract-variety"><img src="../img/minus.png" alt="Reomve" title="Remove a Variety" /></a><br/>');

$（'a.add-variety'）。单击（函数（）{
$（this.prepend（“
”）；

}))

而且我认为您不需要在这个jQuery块中“返回”任何内容。

$（this）。append表示在当前元素的内容中附加一些内容（在本例中，是）

$（这个）。之后可能就是你要找的

此外，添加到dom中的新元素将没有单击处理程序，因此您还必须将单击处理程序代码应用于新元素。

$（此）。append表示将某些内容附加到当前元素的内容中（在本例中，为）

$（这个）。之后可能就是你要找的

---

此外，添加到dom中的新元素将没有单击处理程序，因此您还必须将单击处理程序代码应用于新元素。

要回答第二个问题：

您可以在“父级”级别执行操作：

$('a.add-variety').parent().click(function() {
    ...
});

---

要回答您的第二个问题：

您可以在“父级”级别执行操作：

$('a.add-variety').parent().click(function() {
    ...
});

加载页面时，“添加变体”函数仅绑定到“.add variation”元素一次。任何新创建的“添加变体”按钮都不会绑定任何代码，因为它们是在页面加载后创建的。您可能希望使用该函数，而不是单击

正如您所指出的，另一个问题是，您在
元素中附加了额外的行，而不是在元素之后

我建议将整个内容包装在一个
div
标记中，以便轻松访问每一行。这将允许您通过复制现有行的HTML来删除一些重复代码，而不是将其再次包含在JavaScript代码中

以下是我建议的版本：

<div>
     <label for="varieties">Varieties</label><input type="text" name="varieties[]" id="varieties1" value="Default" /> <a href="#" class="add-variety"><img src="../img/plus.png" alt="Add" title="Add Another Variety" /></a><br />
</div>


品种


和jQuery：

$(function() {
    $('a.add-variety').live('click', function() {
        $(this).removeClass('add-variety');
        $(this).addClass('subtract-variety');

        var parent = $(this).parent();
        parent.after($('<div />').html(parent.html()));

        $('img', this).attr('src','../img/minus.png');
    });
});

$（函数（）{
$（'a.add-variety'）.live（'click'，function（））{
$（this.removeClass（'add-variety'）；
$（this.addClass（'subtract-variety'）；
var parent=$（this.parent（）；
parent.after（$（''）.html（parent.html（））；
$（'img'，this.attr（'src'，'../img/minus.png'）；
});
});

我用
$（string，element）
而不是
子元素
来访问子图像-我不确定这是否有助于解决负图像问题，但我发现这个表单似乎工作得更好，因为它包含元素的所有匹配子元素，而不仅仅是直接子元素。
您的“添加变体”加载页面时，函数仅绑定到“.add variety”元素一次。任何新创建的“添加变体”按钮都不会绑定任何代码，因为它们是在页面加载后创建的。您可能希望使用该函数，而不是单击

正如您所指出的，另一个问题是，您在
元素中附加了额外的行，而不是在元素之后

我建议将整个内容包装在一个
div
标记中，以便轻松访问每一行。这将允许您通过复制现有行的HTML来删除一些重复代码，而不是将其再次包含在JavaScript代码中

以下是我建议的版本：

<div>
     <label for="varieties">Varieties</label><input type="text" name="varieties[]" id="varieties1" value="Default" /> <a href="#" class="add-variety"><img src="../img/plus.png" alt="Add" title="Add Another Variety" /></a><br />
</div>


品种


和jQuery：

$(function() {
    $('a.add-variety').live('click', function() {
        $(this).removeClass('add-variety');
        $(this).addClass('subtract-variety');

        var parent = $(this).parent();
        parent.after($('<div />').html(parent.html()));

        $('img', this).attr('src','../img/minus.png');
    });
});

$（函数（）{
$（'a.add-variety'）.live（'click'，function（））{
$（this.removeClass（'add-variety'）；
$（this.addClass（'subtract-variety'）；
var parent=$（this.parent（）；
parent.after（$（''）.html（parent.html（））；
$（'img'，this.attr（'src'，'../img/minus.png'）；
});
});

我使用了
$（字符串，元素）
而不是
子元素
来访问子映像-我不确定这是否有助于解决负映像问题，但我发现该表单似乎工作得更好，因为它包含元素的所有匹配子元素，而不仅仅是直接子元素。
实际上，prepend给了我同样的问题。因为我的目标是锚定标记，prepend只是将其插入图像之前，而不是之后，但仍在锚定标记内。我