jQuery追加执行链接替换

Question

inputTabTitle: function(){
   origin = template.clone();
   $("#inputTabCount").change(function(){
     tabcount = parseInt($("#inputTabCount").val());
     if(tabcount > 0){
       tab = origin.find("label").text();
       for(i = 1; i <= tabcount; i ++){
         origin.find("label").text(tab + i);
         origin.find("label").attr("for", "inputTabTitle" + i);
         origin.find("input").attr("id", "inputTabTitle" + i);
         $("#tabCount").append(origin);
       }
     }
   })
 }

set n = 3

When append to "#tabCount", only one element insert, actually should be three.But this code append performed like replace.Why? And when I add "origin = origin.clone()" before loop end, it worked well, three element inserted.

Answer 1

You clone your template only once. That means: Two times you append the 'origin' to a place, where it already is. To get, what you want (or I think you want), the cloning MUST be in the loop.

Please notice further that you pollute the GLOBAL space when you define variables such as 'tabcount' without the 'var'. I fixed that in your source code, too.

Rewrite the function like that below. But be warned: The amount of tabs is being inserted every time the value changes. That means:

• Value changes to 1 --> one tab is made
• Value changes to 2 --> two ADDITIONAL tabs are made.

.

inputTabTitle: function(){   
    $("#inputTabCount").change(function(){
        var tabcount = parseInt($("#inputTabCount").val());

        if(tabcount > 0){
            tab = template.find("label").text();

            for(i = 1; i <= tabcount; i ++){
                var origin = template.clone();

                origin.find("label").text(tab + i);
                origin.find("label").attr("for", "inputTabTitle" + i);
                origin.find("input").attr("id", "inputTabTitle" + i);

                $("#tabCount").append(origin);
             }
         }
     })

 }