javascript - $('.add').live('click', function()

Question

我似乎无法在我的 javascript 中添加选项标签。帮帮我吧。
我想要做的是添加按钮的功能。

    var scntDiv = $('.input');
    var i = $('.input p').size() + 0;

$('.add').on('click', function() {
            $('<p><input type="text" name="barcode' + i + '" id="textbox_input1" placeholder="Barcode"/>                <input type="text" name="item' +i+ '" id="textbox_input1" placeholder="Item"/>              <input type="number" name="qtty' +i+ '" id="textbox_input1" placeholder="Quantity"/>                <input type="number" name="min' +i+ '" id="textbox_input1" placeholder="Minimum"/>              <select name="category' +i+ '" id="textbox_input1"/><option value="Grocery">Grocery</option><option value="Furniture">Furniture</option></select>               <input type="text" name="price' +i+ '" id="textbox_input1" placeholder="Price"/>                <input type="text" name="promo' +i+ '" id="textbox_input1" placeholder="Promo"/>                <button type="button" class="remove" id="button">Remove</button></p>').appendTo(scntDiv);
            i++;

            return false;

    });

请帮我。我的问题是单击添加按钮时不会出现选项值。这

<select name="category' +i+ '" id="textbox_input1"/><option value="Grocery">Grocery</option><option value="Furniture">Furniture</option></select>

在脚本中没有给出任何选项。

Answer 1

将 live 更改为 on：

$('body').on('click', '.add', function() {
    // do something
});

注意：将“body”更改为 .add 的父元素，最好是带有 ID 的元素。

另请参阅jQuery 1.9 .live() 不是函数和jQuery - 如何使用“on()”方法而不是“live()”？

JSfiddle：http: //jsfiddle.net/samliew/tPdyT/

Answer 2

我建议不要使用 .live() 并升级到最新版本的 jQuery 1.9.1。

• .live() 已弃用并由 .on() 取代
• 而不是 return false 使用 preventDefault （以避免意外行为）

• i++ 仅在循环内工作，因此请考虑使用.each()

  $('document').on('click', '.add', function(e) { e.preventDefault(); // 做点什么 });

下次要获得更多代码帮助，请解释您要实现的目标并发布更多代码，以便我们有最好的机会回答您的问题。

Answer 3

本准则不是最佳实践。

1. 变量 i 未初始化
2. 将生成相同的 id 标签。
3. scntDiv 似乎是未定义的变量。

Answer 4

在编写选项标签之前，您可以关闭您的选择元素，方法是使用<select/>. 应该是哪个<select>。也就是说，删除/第一个标签末尾的多余部分。

所以它变成了这样：

<select>
  <option></option>
  <option></option>
</select>

而不是这个：

<select/>
  <option></option>
  <option></option>
</select>

当然，添加你之前使用的属性。

我还建议看看其余的答案。