克隆jQuery的移動輸入字段與數據清除-BTN =「真」

Question

使用jQuery和jQuery的移動我試圖做出一個動態的形式。輸入字段被創建或刪除，以便始終保留一個空的輸入字段。

這是我的jQuery代碼來實現這一目標（在這裏嘗試： http://jsfiddle.net/SR864/17/）：

$(document).ready(function() { 
    var total = 1; 
    // add new field 
    $("#bar").on("input", ".input", function() { 
     // add new field 
     if ($(".input").last().val() != "") { 
      var newFields = $(this).closest("p").clone(); 

      newFields.find(":input").each(function() { 
       var name = $(this).attr('name').replace('-' + (total - 1), '-' + total); 
       var id = 'id_' + name; 
       $(this).attr({'name': name, 'id': id}).val(''); 

       total++; 
      }); 
      $(this).closest("p").after(newFields); 
     } 
    }); 
    $("#bar").on("input", ".input", function() { 
     // remove empty field 
     if ($(this).val() == "") { 
      $(this).closest("p").remove(); 
     } 
    }); 
}); 

我也想擁有「刪除，按鍵」輸入字段中刪除從文本輸入字段。 jquery mobile爲此提供了data-clear-btn="true"。但是，不知何故，data-clear-btn="true"的行爲僅適用於第一個輸入字段 - 新（克隆的）字段不會顯示清除按鈕。

問題
如何獲得克隆輸入字段的清除按鈕？

獎金問題
什麼是需要有刪除輸入字段時按下清除按鈕後，它們是空的？

Answer 1

jQM將div中的input字段包裝在ui-input-text中。您需要克隆input本身 - 而不是包裝div - 更改其'id,name,val()等。然後將其添加到form和增強它使用.textinput()函數。

此外，您應該在pagecreate事件中包裝代碼。

$(document).on("pagecreate", function() { 
    var counter = 0; 
    $("#bar").on("input", function (e) { 
     if ($(e.target).val().length === 1) { /* after 2 characters add a new input */ 
      counter++; 
      var id = "input-" + counter; 
      var input = $(e.target).clone().prop({ 
       id: id, 
       name: id 
      }).val(""); 
      $(e.target).closest(".ui-input-text").after(input); 
      $("#" + id).textinput(); 
     } 
    }); 
}); 

Demo

Answer 2

我檢查了一下問題。默認情況下，十字按鈕（這是一個標籤）有一個類'ui-input-clear-hidden'，它可以讓你隱藏，直到你輸入。儘管在開始輸入後克隆了元素，但重複元素也具有隱藏的類（可能在類'ui-input-clear-hidden'被刪除之前進行了克隆）。所以我建議從克隆對象中明確地刪除類「ui-input-clear-hidden」，如下所示。

$("#bar").on("input", ".input", function() { 
    // add new field 
    if ($(".input").last().val() != "") { 
     var newFields = $(this).closest("p").clone(); 

     newFields.find(":input").each(function() { 
      var name = $(this).attr('name').replace('-' + (total - 1), '-' + total); 
      var id = 'id_' + name; 
      $(this).attr({'name': name, 'id': id}).val(''); 

      total++; 
     }); 
     $(this).closest("p").after(newFields); 
    } 

    /* New line Added for Fix*/ 
    newFields.find('a').removeClass('ui-input-clear-hidden'); 
});