Question

他试图附加一个处于引导程序中的表单（使用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

使用jQuery的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>

Answer 2

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

在jquery html函数中使用您的表单。它会帮助您。

Answer 3

我只是测试您的代码，它就可以正常工作。

也许您在呈现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>

jQuery：附加功能在网页中无法正常工作

3 个答案: