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/