如何創建使用動態創建的按鈕

我想創建通過使用jQuery使用動態創建按鈕，動態域動態字段我創建一個UI在。如果你不明白請檢查代碼

jQuery的文件

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script> 
    $(document).ready(function(e){ 
     var html='<div><br>Alter Mobile No : <input type="text" name="mobile[]" id="mobile">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" name="close" value="X" id="cls"></div>'; 
     var htmlrow ='<br><div style="text-align: left;"><input type="button" name="remrow" id="remrow" value="X"><div class="row"><div>Full Name :<input type="text" name="fname[]" id="fname"></div><div class="col-md-3" id="addmob">Mobile No : <input type="text" name="mobile[]" id="mobile"> &nbsp;<input type="button" name="addB" id="add" value="+" ></div></div></div>'; 

     $("#add").click(function(){ 
      $("#addmob").append(html); 
     }); 

     $("#addmob").on('click','#cls',function(e){ 
      $(this).parent('div').remove(); 
     }); 

     $("#addrow").click(function(){ 
      $("#row123").append(htmlrow); 
     }); 

     $("#row123").on('click','#remrow',function(e){ 
      $(this).parent('div').remove(); 
     }); 
    }); 
</script>

HTML文件

<body> 
    <div> 
     <input type="button" name="addrow" id="addrow" value="Add"> 
    </div> 
    <br> 
    <div class="container" id="row123"> 
     <div class="col-md-3"> 
     Full Name :<input type="text" name="fname" id="lname"> 
     </div><br> 
     <div class="col-md-3" id="addmob"> 
      Mobile No : <input type="text" name="mobile[]" id="mobile"> &nbsp;<input type="button" name="add" id="add" value="+" > 
     </div> 
    </div> 
</body>

來源

2017-09-16 besalelu k

究竟是什麼，你有麻煩？ – DavidDomain

我想通過使用按鈕（即動態創建按鈕）創建html文本框 –

您可以動態使用PHP腳本或Jquery創建按鈕，在這裏您想要哪個按鈕動態 –

$(document).ready(function(e){ 
       var html='<div><br>Alter Mobile No : <input type="text" name="mobile[]" id="mobile">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" name="close" value="X" id="cls"></div>'; 
       var htmlrow ='<div style="text-align: left; margin-top:15px;"><input type="button" name="remrow" id="remrow" value="X"><div class="row"><div>Full Name :<input type="text" name="fname[]" id="fname"></div><div class="col-md-3" id="addmob">Mobile No : <input type="text" name="mobile[]" id="mobile"> &nbsp;<input type="button" name="addB" id="add" value="+" ></div></div></div>'; 


       $("#row123").on('click', '#add', function(){ 
        $(this).closest("#addmob").append(html); 
       }); 


       $("#row123").on('click','#cls',function(e){ 

       $(this).parent('div').remove(); 
        }); 

       $("#addrow").click(function(){ 


        $("#row123").append(htmlrow); 

       }); 

       $("#row123").on('click','#remrow',function(e){ 

       $(this).parent('div').remove(); 
       }); 

      });

來源

2017-09-16 09:58:41

超棒！非常感謝你的工作 –

如何創建使用動態創建的按鈕

回答

相關問題