Question

我有一個簡單的表單，其中每行包含3個輸入字段。在其中一個字段上，我使用jscolor.js（字段有class="color"，因此綁定了JS）。

但是，當我使用jQuery的delegate()添加新行時，輸入字段不綁定JS，並且預期的功能不存在。 http://jsfiddle.net/alexwald/qARzP/

<script> 
var line = '<li class="form_line" id="line">  
       <span> 
       <label for="item">Item:</label> 
       <input type="text" required="required" placeholder="what item is this?" id="item" name="item[]> 
       </span> 
       <span> 
       <label for="amount">Amount: </label> 
       <input required="required" type="number" id="amount" name="amount[]> 
       </span> 
       <span> 
       <label for="color">Color: </label> 
       <input type="text" required="required" class="color {pickerClosable:true, hash:true ,pickerFace:3,pickerBorder:0}" id="color" name="color[]"> 
       </span> 
      </li>'; 

$(document).ready(function() {   
    $("form").delegate(".add", "click", function(){   
    $('ul').append(line); 
    }); // end of adding        
}); //end of main func 
</script> 

我認爲這個問題是無論是在：

• 我如何定義line變量，或
• 我使用的是不正確的選擇與.delegate，所以它應該是別的東西不是form ..？

任何幫助非常感謝。

Answer 1

有幾個問題，你的代碼：

1. 你在你的「行」變量使用的ID。 ID在HTML文檔中必須是唯一的。您最好使用名稱屬性，或以不同的方式創建新行，以便更改ID。

2. 爲什麼你將'點擊'事件委託給'添加'按鈕？使用事件委託能夠自動將事件「綁定」到動態創建的元素。在您的示例中，「添加」按鈕對頁面而言是靜態的，您不需要使用委託，只需使用.click（）或.bind（）。

3. 創建新行後，您必須在新字段上顯式初始化jscolor，它不會自動發生。當你的頁面第一次被解析時，現有的<input class="color" />由jscolor插件初始化，但之後未完成的元素不再存在，腳本已經運行。

下面是一些修改後的代碼：

<script> 
    var line = '<li class="form_line" id="line"><span><label>Item:</label><input type="text" required="required" placeholder="what item is this?" name="item"></span><span><label>Amount: </label><input required="required" type="number" name="amount"></span><span><label>Color: </label><input type="text" required="required" class="color {pickerClosable:true, hash:true ,pickerFace:3,pickerBorder:0}" name="color"></span></li>'; 

    $(document).ready(function() { 

     var $ul = $('#formulario'); // the UL, select it once and r-use this selection 

     $('.add').click(function(e) { 
      var $line = $(line); 
      $line.appendTo($ul); 

      // initialize the new jscolor instance 
      new jscolor.color($line.find('input[name=color]')[0], {}); 

     }); 


    }); //end of main func 
</script> 

這jsfiddle進行測試。

Answer 2

你可以通過在append事件中重新初始化jscolor對象來解決這個問題。

$("body").on('click', 'div .add', function(){ 
    $("#some-id").append('<input type="text" name="color" class="color">'); 
    new jscolor.init(); 
}); 

Answer 3

沒有其他解決方案適用於我。

以下解決方案適用於我。
只需創建新的jscolor對象由在javascript中傳遞輸入元素對象。從http://jscolor.com/examples/

var picker = new jscolor($li.find('.jscolor')[0]); 

參考去實例化新的顏色選取部分。