javascript - 无法将动态 id 添加到 jquery 元素

Question

我有以下jquery

var wrapperClass        = 'tableAccordionWrapper';
var template            = 'tableInput.html';

addTableInput = function(){
    var int;
    var wrapper = $('<li />');
    wrapper.addClass(wrapperClass);
    wrapper.attr('id','table1');
    var href = $('<a href="#">Table xx</a>');
    var parentWrapper = $('#selectedTables .sub-content .input-controls');
    $.ajax({
        url:        template,
        dataType:   'html',
        success: function(data){
            wrapper.append(href);
            $(data).appendTo(wrapper).insertBefore(parentWrapper);
        },
        error: function(){
            console.log('Something went wrong')
        },
        complete: function(){
            int = $('.tableAccordionWrapper').length; 
            console.log(int);
        }
    });
}

addClass 函数正在正确地传递给 li 元素。但奇怪的是不是attr add id。当我调试时，我可以看到该节点的 id 似乎暂时存在，但退出调试后，该元素仅保留类名。

我什至尝试像这样链接函数:

wrapper.addClass(wrapperClass).attr('id','table1');

还尝试过:

wrapper.attr('tabindex','1');

看看是否是属性的问题。但似乎只有类名被传递给 LI 元素。

我还尝试在ajax success和complete函数中传递wrapper.attr('id','table1')函数。

我的问题

我有一大块 html，它构成了表单的一部分。在 dom 准备好时，通过 ajax 注入(inject)单个 html block 。用户可以插入额外的 block ，此时我为表单元素创建一个包装器，并且我需要某种方法来计算当前元素的数量，或者增加一个整数以添加到 LI 的 ID 中，以便子元素是唯一的。

如果这需要一个有效的 jsfiddle 示例，我可以尝试设置一个。

编辑

我想知道这是否与我在 jquery 中创建 LI 节点的方式有关？

var wrapper = $('<li />');

编辑

HTML block :

<label for="tableDescription1" class="control col-md-6">Table description
    <input type="text" name="tableDescription1" class="mandatory fullWidth">
</label>
<label for="rowCount1" class="control">Row count
    <input type="text" name="rowCount1" value="">
</label>
<p class="control">Is there a Pre-Environment</p>
<span class="controls-stacked">
    <label class="control radio">
        <input type="radio" name="preEnvironment1" type="radio" value="Y" class="hiddenInput" checked />
        <span class="control-indicator"></span>
        Yes
    </label>
    <label class="control radio">
        <input type="radio" name="preEnvironment1" type="radio" value="N" class="hiddenInput" />
        <span class="control-indicator"></span>
        No
    </label>
</span>

表单 block 中的名称是唯一的，因此当通过 ajax 添加新的 html block 时，它们需要递增。

例如，当注入(inject)第二个 html block 时，rowCount1 需要增加到 rowCount2。

Answer 1

问题:

您永远不会向页面添加wrapper。我假设这行意味着这样做:

$(data).appendTo(wrapper).insertBefore(parentWrapper);

为了保留方法链，jQuery 方法如 appendTo(target)不返回目标，而是返回前面的元素。考虑到这一点，您会注意到上面的示例实际上只是在执行 $(data).insertBefore(parentWrapper) - appendTo 没有太多作用。

我做了this example来演示。

<小时/>

解决方案:

尝试这样的事情:

wrapper.append(data).insertBefore(parentWrapper);

在此示例中，我们对内容进行了一些调整，以便整行现在引用 wrapper，而不是 data.