2017-04-25 70 views
0

我已在follwing jQuery的不能动态ID添加到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元素。

我也试过通过wrapper.attr('id','table1')函数里面的ajax成功和完成函数。

enter image description here

我的问题

我有一大块的HTML的构成形式的组成部分。在dom准备好之后,通过ajax注入一个html块。用户可以插入额外的块,此时我为表单元素创建一个包装器,并且我需要一些方法来计算当前元素,或者增加一个整数以添加到LI的ID,以便子元素将是唯一的。

如果这需要一个工作jsfiddle的例子,我可以尝试设置一个。

编辑

我想知道它是否是与我创建jQuery中的李节点的方式吗?

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

编辑

HTML块:

<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> 

形式块名称是唯一的,所以他们需要在HTML的新块通过AJAX加到递增。

例如,当注入第二个html块时,rowCount1将需要递增到rowCount2。

+0

为什么你甚至需要添加一个ID?你可以保留一个计数器,每增加一个创建的元素就可以增加一个。你知道你可以计数元素没有他们有一个身份证的权利? – Milney

+0

@Milney当然,我不必使用ID。我也尝试增加类名,并添加我自己的attr data-id,但都没有工作。 – lharby

+0

我不明白你的问题......他们都可以有相同的类名(不必是唯一的)...然后你可以简单地用$(“body”)来计数它们。find(“。className “).length(注意使用find(),正如你所提到的,它们是动态添加的) – Milney

回答

2

的问题:

你永远添加wrapper页面。我假设这条线是意味着做到这一点:

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

为了保护方法,链接,jQuery的方法,如appendTo(target)不返回目标,而是前面的元素。考虑到这一点,你会注意到上面的例子实际上只是在做$(data).insertBefore(parentWrapper) - appendTo没有达到很大的目的。

我制作了this example来演示。


解决方案:

尝试这样的事情,而不是:

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

在这个例子中,我们已经改组事情有点,使整个线现参考wrapper,而不是data

+0

是的,谢谢你,我刚刚在大概的同一时间完成了这项工作,现在似乎正在开展工作。 – lharby