JS使用來自兩個不同來源的功能

Question

我有三個單選按鈕，每個按鈕的選擇會更改#show div內的內容。 當頁面加載div包含一個動態形式，它的作品perfectley。 我選擇了其中一個單選按鈕後，回到表單情況，動態表單不會添加更多字段。

我是一種新的JS，我不能發現問題。 任何幫助將是偉大的。

我不知道有什麼好 更好的試題標題任何建議都會被接受

這是充滿活力的領域功能

$(document).ready(function() { 
     $("#addm").click(function() { 
      var intIdm = $("#buildyourformm div").length + 1; 
      var fieldWrapper = $("<div class=\"fieldwrapper\" name=\"field[]\" id=\"fieldm" + intIdm + "\"/>"); 
      var wfnamem = $("<div class=\"col-sm-5\"> <input type=\"text\" placeholder=\field 1\" name=\"inputwFname[]\" class=\"form-control\"></div>\" "); 
      var wlnamem = $("<div class=\"col-sm-5\"> <input type=\"text\" placeholder=\"field 2\" name=\"inputwLname[]\" class=\"form-control\"></div>\" "); 


      var removeButtonm = $("<input type=\"button\" class=\"remove-btn btn-warning\" value=\"remove\" />"); 
      removeButtonm.click(function() { 
       $(this).parent().remove(); 
      }); 

      fieldWrapper.append(wfnamem); 
      fieldWrapper.append(wlnamem); 
      fieldWrapper.append(removeButtonm); 
      $("#buildyourformm").append(fieldWrapper); 
     }); 
    }); 

這是什麼，我已經做了鏈接的問題

http://jsfiddle.net/davseveloff/ca7gvrkp/

Answer 1

的問題是，你沒有委派一個單擊處理在添加按鈕，所以當你製作DOM（除去追加）綁定到特定的ID不會工作，因爲你刪除了元素我也將點擊處理器合併到你的就緒函數中，你不需要兩個就緒函數

$(document).ready(function(){ 
     $('input[type=radio]').change(function(){ 
     var n = $(this).val(); 
     switch(n) 
     { 
       case '1': 
         $('#show').html('<fieldset id="buildyourformm"><div name="field1" id="field1"><div><input type="text" placeholder="field 1" name="inputwFname[]"></div><div><input type="text" placeholder="field 2" name="inputwLname[]" class="form-control"></div><input type="button" value="remove"></div></fieldset><input type="button" value="add" id="addm" /><br><br><br></div></div></div></fieldset>'); 
         break; 
       case '2': 
         $('#show').html("2nd radio button"); 
         break; 
       case '3': 
         $('#show').html("3rd radio button"); 
         break; 
      } 
     }); 


      $("#show").on("click","#addm",function (event) { 
       var intIdm = $("#buildyourformm div").length + 1; 
       var fieldWrapper = $("<div class=\"fieldwrapper\" name=\"field[]\" id=\"fieldm" + intIdm + "\"/>"); 
       var wfnamem = $("<div class=\"col-sm-5\"> <input type=\"text\" placeholder=\field 1\" name=\"inputwFname[]\" class=\"form-control\"></div>\" "); 
       var wlnamem = $("<div class=\"col-sm-5\"> <input type=\"text\" placeholder=\"field 2\" name=\"inputwLname[]\" class=\"form-control\"></div>\" "); 


       var removeButtonm = $("<input type=\"button\" class=\"remove-btn btn-warning\" value=\"remove\" />"); 
       removeButtonm.click(function() { 
        $(this).parent().remove(); 
       }); 

       fieldWrapper.append(wfnamem); 
       fieldWrapper.append(wlnamem); 
       fieldWrapper.append(removeButtonm); 
       $("#buildyourformm").append(fieldWrapper); 
      }); 
    }); 

注意，這與jQuery 1.6不會工作，如果你真的需要使用舊版本，改變。對給.live

繼承人的工作小提琴

http://jsfiddle.net/ca7gvrkp/5/

Answer 2

這是因爲，在很第一次提姆e您的文檔就緒函數將事件處理程序附加到UI按鈕，但是當您選擇另一個單選按鈕並再次返回到表單時，雖然它看起來是相同的表單，但它不是。因爲根據您的代碼，基於單選按鈕，您將再次呈現控件。但是這一次，準備好的文檔將不會被執行，因爲它實際上不是刷新。

我已經修改了你的代碼一點點，看看這個小提琴

$(document).ready(function(){ 
    $('input[type=radio]').change(function(){ 
    var n = $(this).val(); 
    switch(n) 
    { 
      case '1': 
        $('#show').html('<fieldset id="buildyourformm"><div name="field1" id="field1"><div><input type="text" placeholder="field 1" name="inputwFname[]"></div><div><input type="text" placeholder="field 2" name="inputwLname[]" class="form-control"></div><input type="button" value="remove"></div></fieldset><input type="button" value="add" id="addm" /><br><br><br></div></div></div></fieldset>'); 
        tieEvents(); 
        break; 
      case '2': 
        $('#show').html("2nd radio button"); 
        break; 
      case '3': 
        $('#show').html("3rd radio button"); 
        break; 
     } 
    }); 
}); 




$(document).ready(function() { 
    tieEvents(); 
     }); 

function tieEvents() { 
    $("#addm").click(function() { 
      var intIdm = $("#buildyourformm div").length + 1; 
      var fieldWrapper = $("<div class=\"fieldwrapper\" name=\"field[]\" id=\"fieldm" + intIdm + "\"/>"); 
      var wfnamem = $("<div class=\"col-sm-5\"> <input type=\"text\" placeholder=\field 1\" name=\"inputwFname[]\" class=\"form-control\"></div>\" "); 
      var wlnamem = $("<div class=\"col-sm-5\"> <input type=\"text\" placeholder=\"field 2\" name=\"inputwLname[]\" class=\"form-control\"></div>\" "); 


      var removeButtonm = $("<input type=\"button\" class=\"remove-btn btn-warning\" value=\"remove\" />"); 
      removeButtonm.click(function() { 
       $(this).parent().remove(); 
      }); 

      fieldWrapper.append(wfnamem); 
      fieldWrapper.append(wlnamem); 
      fieldWrapper.append(removeButtonm); 
      $("#buildyourformm").append(fieldWrapper); 
     }); 

} 

http://jsfiddle.net/ca7gvrkp/6/