jQuery: функция добавления не работает нормально на веб-странице

Question

Привет, м, пытается добавить форму, которая находится в bootstrap (используя jQuery append funciton) ,,, он должен открыть его один раз, но открывает его дважды, и кнопка, которая находится в конце for, показывает один время и скрыть в другой раз, я просто хочу показать форму один раз, щелкнув один раз, и когда я нажимаю снова, он снова отображается: «это текущий вывод, я просто хочу, чтобы он показывал только один раз https://ibb.co/CtLrBzr "

html код:

    <div class="col-md-4 create-task-btn1">
<span href="" class="btn btn-info btn-lg dashboard-icon append">
<i class="fa fa-plus fa-1x"></i>
<br>
Assign Task
</span>
  </div>

  <div id="table-bordered">
  </div>

$(document).ready(function() {
  $('.append').click(function() {
    $('#table-bordered').append(`<div class="container" style="margin-top:50px;">
               <div class="row">
                <form action="#" id="" method="post" class="form-horizontal" role="form" novalidate="novalidate">
                    <table class="table table-bordered" style="width: 950px;">
                        <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 create-task-btn1">
  <span href="" class="btn btn-info btn-lg dashboard-icon append">
          Assign Task
        </span>
</div>

Answer 1

$(".append").on("click", function(){
    $('#table-bordered').html();
});

Используйте вашу форму внутри функции jquery html. это поможет вам.

Answer 2

Я просто тестирую ваш код, и он работает нормально ..

Может быть, вы пишете скрипт перед рендерингом html? (имеется в виду в заголовке html, без отсрочки)?

Убедитесь, что вы добавили скрипт в конец тела или добавили туда атрибут defer. в противном случае, когда вызывается скрипт, кнопка, к которой вы пытаетесь добавить слушателя, не существует в тот момент, когда скрипт запускается

 $(document).ready(function () {
        $('.append').click(function () {
            $('#table-bordered').append(`<div class="container" style="margin-top:50px;">
               <div class="row">
                <form action="#" id="" method="post" class="form-horizontal" role="form" novalidate="novalidate">
                    <table class="table table-bordered" style="width: 950px;">
                        <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 create-task-btn1">
<span href="" class="btn btn-info btn-lg dashboard-icon append">
    <i class="fa fa-plus fa-1x"></i>
    <br/>
    Assign Task
</span>
</div>

<div id="table-bordered"></div>

Answer 3

Использование jQuery s one :

$('.append').one("click" , function(){ ... }

$('.append').one("click", function() {
  $('#table-bordered').append(`<div class="container" style="margin-top:50px;">
               <div class="row">
                <form action="#" id="" method="post" class="form-horizontal" role="form" novalidate="novalidate">
                    <table class="table table-bordered" style="width: 950px;">
                        <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 create-task-btn1">
  <span href="" class="btn btn-info btn-lg dashboard-icon append">
<i class="fa fa-plus fa-1x"></i>
<br>
Assign Task
</span>
</div>

<div id="table-bordered">
</div>