Question

我有以下代码 -

    <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中的添加按钮单击事件上添加文本框。有什么帮助吗？

Answer 1

选中 Demo Fiddle

$('.cmxform').append('<br/><input type="text" class="someclass"> ');

使用 append() 函数将元素动态附加到DOM中的元素。

其他选择：

的 appendTo()

的 prepend()

取决于您希望追加元素的位置和方式。

Answer 2

以下代码可让您添加文本框并将其删除，以防您改变主意：

$(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 FIDDLE DEMO

Answer 3

你可以用这样的jquery来做：

    $("#add").click(function(event){

     event.preventDefault();

     $("input.someclass:first").clone(true).val("").appendTo(".cmxform");

    });

clone()将创建文本框副本，然后使用val("")重置其值，然后使用appendto()

将其附加到表单中

FIDDLE DEMO

Answer 4

        I have used something like this. It may be helpful

        HTML :

        <div class="filter_selector">
            <input type="text">
            <button class="remove_filter_category">-</button>
            <button class="add_filter_category">+</button>

        </div>

    jquery:

    $(document).ready(function() {

        function updateFilterUI(){
          $('.filter_selector .remove_filter_category').show();
          $('.filter_selector .add_filter_category').hide();
          $('.filter_selector .add_filter_category:last').show();
          $('.filter_selector:only-child .remove_filter_category').hide();
        }

        updateFilterUI()

        $('.filter_selector').on('click', '.add_filter_category', function () {

          $('.filter_selector:last').after($('.filter_selector:last').clone(true));

                updateFilterUI();

          $('.filter_selector:last').find('input').val('');
                return false;
            });

        $('.filter_selector .remove_filter_category').on('click', function () {
                $(this).parent().remove();
                updateFilterUI();
                return false;
            });
    });

You can even test it in JSFIDDLE 

Thanks.

在jquery中动态添加文本框

4 个答案: