在jQuery中动态添加文本框 [英] Dynamically add textbox(s) in jquery

问题描述

我有以下代码-

    <div class="service_box">
       <div class="form">
           <form class="cmxform">
               <label>EL POS :</label>
               <input type="checkbox">
                <!-----------------------
                 multiple textboxes shall be added here as
                 <input type="text" class="someclass"> ---> textbox 1
                 <input type="text" class="someclass"> ---> textbox 2
                 ------------------------>
               <button id="add">Add</button>
           </form>
       </div>
   </div>

我想在jquery中的添加按钮单击事件上添加文本框.有帮助吗?

I would like to add textbox(s) on the add button click event in jquery. Any help?

推荐答案

以下代码将使您既可以添加文本框，也可以删除文本框，以防万一您改变主意:

The following code will enable you to both add text boxes and remove them, just in case you change your mind:

$(function() {
    $('#add').on('click', function( e ) {
        e.preventDefault();
        $('<div/>').addClass( 'new-text-div' )
        .html( $('<input type="textbox"/>').addClass( 'someclass' ) )
        .append( $('<button/>').addClass( 'remove' ).text( 'Remove' ) )
        .insertBefore( this );
    });
    $(document).on('click', 'button.remove', function( e ) {
        e.preventDefault();
        $(this).closest( 'div.new-text-div' ).remove();
    });
});

JS FIDE DEMO

这篇关于在jQuery中动态添加文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！