append() 函数在网页中不起作用

Question

I'm trying to append a form but its not responding. Is there any solution for this?

when i click below button

<div class="col-md-4">
  <span href="" class="btn btn-info btn-lg dashboard-icon append">Assign Task</span>
</div>

then it opens

paste.ofcode.org/U5pWqiQmsM8BAaUS3dA2X6

by using this:

  $('.create-task-btn1').click(function(){
     $('.create-task-form1').stop().slideToggle();
  });

then i add "append" class in button and add this code which is below ,,, and after it it stoped working, "its class not id"

$('.append').click(function() {
  $('table-bordered').append('
      <div class="container">
    <div class="row">
        <form action="#" id="" method="post" class="form-horizontal" role="form" novalidate="novalidate">
            <table class="table table-bordered">
                <tbody>
                    <tr>
                        <th scope="row" style="font-size: 14px;">Task<span class="text-danger">*</span></th>
                        <td colspan="3"><input type="text" class="form-control" value="" name="subject"></td>
                        <td rowspan="3">
                            <a data-id="" data-toggle="modal" data-original-title="" class="enable-tooltip btn" 
                                style="color: red; font-size: 20px;">
                                <i class="fa fa-trash-o"></i>
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row" style="font-size: 14px;">Assigned To<span class="text-danger">*</span></th>
                        <td><input type="text" class="form-control" value="" name="subject"></td>
                        <th style="font-size: 14px;">Due Date<span class="text-danger">*</span></th>
                        <td><input type="text" class="form-control" value="" name="subject"></td>
                    </tr>
                </tbody>
            </table>
        </form>
    </div>
    </div>');
});

<div class="col-md-4">
  <span href="" class="btn btn-info btn-lg dashboard-icon append">Assign Task</span>
</div>

simply i wants that when i click on assign btn then below form comes once with finish btn and when i click again and again then it comes without finish button like https://ibb.co/QYCR45P

Answer 1

try using this:

<div class="col-md-4">
  <span href="" class="btn btn-info btn-lg dashboard-icon append">Assign Task</span>
</div>
 <form class="table-bordered">

 </form>

<script type="text/javascript">
  $('.append').click(function() {
  $('.table-bordered').append('<div class="container"><div class="row"><form action="#" id="" method="post" class="form-horizontal" role="form" novalidate="novalidate"><table class="table table-bordered"><tbody><tr><th scope="row" style="font-size: 14px;">Task<span class="text-danger">*</span></th><td colspan="3"><input type="text" class="form-control" value="" name="subject"></td><td rowspan="3"><a data-id="" data-toggle="modal" data-original-title="" class="enable-tooltip btn" style="color: red; font-size: 20px;"><i class="fa fa-trash-o"></i></a></td></tr><tr><th scope="row" style="font-size: 14px;">Assigned To<span class="text-danger">*</span></th><td><input type="text" class="form-control" value="" name="subject"></td><th style="font-size: 14px;">Due Date<span class="text-danger">*</span></th><td><input type="text" class="form-control" value="" name="subject"></td></tr></tbody></table></form></div></div>');
});

    </script>

Answer 2

You have to provide the template as a single string, ie without line breaks and use tilde operator (`) to specify the start and end of template string.

I believe you are appending this table to a DOM element (div or form) whose class name is table-bordered :)

$('.append').click(function() {
$('.table-bordered').append(`<div class="container"><div class="row"><form action="#" 
id="" method="post" class="form-horizontal" role="form" novalidate="novalidate"><table 
class="table table-bordered"><tbody><tr><th scope="row" style="font-size: 
14px;">Task<span class="text-danger">*</span></th><td colspan="3"><input type="text" 
class="form-control" value="" name="subject"></td><td rowspan="3"><a data-id="" data- 
toggle="modal" data-original-title="" class="enable-tooltip btn" style="color: red; 
font-size: 20px;"><i class="fa fa-trash-o"></i></a></td></tr><tr><th scope="row" 
style="font-size: 14px;">Assigned To<span class="text-danger">*</span></th><td><input 
type="text" class="form-control" value="" name="subject"></td><th style="font-size: 
14px;">Due Date<span class="text-danger">*</span></th><td><input type="text" 
class="form-control" value="" name="subject"></td></tr></tbody></table></form></div> 
</div>`);
});

Answer 3

check it..

 $(document).ready(function(){ $('.append').click(function() { $('#table-bordered').append(`<div class="container"><div class="row"><form action="#" id="" method="post" class="form-horizontal" role="form" novalidate="novalidate"><table class="table table-bordered"><tbody><tr><th scope="row" style="font-size: 14px;">Task<span class="text-danger">*</span></th><td colspan="3"><input type="text" class="form-control" value="" name="subject"></td><td rowspan="3"><a data-id="" data- toggle="modal" data-original-title="" class="enable-tooltip btn" style="color: red; font-size: 20px;"><i class="fa fa-trash-o"></i></a></td></tr><tr><th scope="row" style="font-size: 14px;">Assigned To<span class="text-danger">*</span></th><td><input type="text" class="form-control" value="" name="subject"></td><th style="font-size: 14px;">Due Date<span class="text-danger">*</span></th><td><input type="text" class="form-control" value="" name="subject"></td></tr></tbody></table></form></div> </div>`); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-md-4"> <span class="btn btn-info btn-lg dashboard-icon append">Assign Task</span> </div> <div id="table-bordered"> </div>

Answer 4

I think the below code will solve your problem

 $('.append').click(function() { $('.table-bordered').append(`<div class="container"> <div class="row"> <form action="#" id="" method="post" class="form-horizontal" role="form" novalidate="novalidate"> <table class="table table-bordered"> <tbody> <tr> <th scope="row" style="font-size: 14px;">Task<span class="text-danger">*</span></th> <td colspan="3"><input type="text" class="form-control" value="" name="subject"></td> <td rowspan="3"> <a data-id="" data-toggle="modal" data-original-title="" class="enable-tooltip btn" style="color: red; font-size: 20px;"> <i class="fa fa-trash-o"></i> </a> </td> </tr> <tr> <th scope="row" style="font-size: 14px;">Assigned To<span class="text-danger">*</span></th> <td><input type="text" class="form-control" value="" name="subject"></td> <th style="font-size: 14px;">Due Date<span class="text-danger">*</span></th> <td><input type="text" class="form-control" value="" name="subject"></td> </tr> </tbody> </table> </form> </div> </div>`); });

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <div class="col-md-4"> <span class="btn btn-info append">Assign Task</span> </div> <div class="table-bordered"></div>

Answer 5

If you want to add multiple line of html element so there is need to add this ` operator.
I hope below snippet will help you lot.

 $('.append').click(function() { $('.append-target').append(`<div class="container"> <div class="row"> <div class="col-sm-12"> <form action="#" id="" method="post" class="form-horizontal" role="form" novalidate="novalidate"> <table class="table table-bordered"> <tbody> <tr> <th scope="row" style="font-size: 14px;">Task<span class="text-danger">*</span></th> <td colspan="3"><input type="text" class="form-control" value="" name="subject"></td> <td rowspan="3"> <a data-id="" data-toggle="modal" data-original-title="" class="enable-tooltip btn" style="color: red; font-size: 20px;"> <i class="fa fa-trash-o"></i> </a> </td> </tr> <tr> <th scope="row" style="font-size: 14px;">Assigned To<span class="text-danger">*</span></th> <td><input type="text" class="form-control" value="" name="subject"></td> <th style="font-size: 14px;">Due Date<span class="text-danger">*</span></th> <td><input type="text" class="form-control" value="" name="subject"></td> </tr> </tbody> </table> </form> </div> </div> </div>`); });

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container my-3"> <div class="row"> <div class="col-md-4"> <span href="" class="btn btn-info btn-lg dashboard-icon append">Assign Task</span> </div> </div> </div> <div class="append-target"></div>

Answer 6

I suppose you'd put your code in a empty tag. Your code is not clear but I can help you. Take a look of this piece of code, maybe is useful:

--- Before at all you need a span to append your form:

<div class="col-md-12">
    <span class="table-append"></span>
</div>

--- In your script tag (put in at the end before the ):

<script>
        $('.append').click(function() {
            $(".table-append").append(`<div class="container">
                <div class="row">
                    <form action="#" id="" method="post" class="form-horizontal" role="form" novalidate="novalidate">
                        <table class="table table-bordered">
                            <tbody>
                                <tr>
                                    <th scope="row" style="font-size: 14px;">Task<span class="text-danger">*</span></th>
                                    <td colspan="3"><input type="text" class="form-control" value="" name="subject"></td>
                                    <td rowspan="3">
                                        <a data-id="" data-toggle="modal" data-original-title="" class="enable-tooltip btn" 
                                            style="color: red; font-size: 20px;">
                                            <i class="fa fa-trash-o"></i>
                                        </a>
                                    </td>
                                </tr>
                                <tr>
                                    <th scope="row" style="font-size: 14px;">Assigned To<span class="text-danger">*</span></th>
                                    <td><input type="text" class="form-control" value="" name="subject"></td>
                                    <th style="font-size: 14px;">Due Date<span class="text-danger">*</span></th>
                                    <td><input type="text" class="form-control" value="" name="subject"></td>
                                </tr>
                            </tbody>
                        </table>
                    </form>
                </div>
            </div>`);
        });
    </script>

Your table code is put between ´´ to avoid concatenated strings.

Hope this answer can help you!