функция append () не работает на веб-странице - PullRequest
0 голосов
/ 05 февраля 2020

Я пытаюсь append заполнить форму, но она не отвечает. Есть ли какое-нибудь решение для этого?

, когда я нажимаю кнопку ниже

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

, затем открывается

paste.ofcode.org / U5pWqiQmsM8BAaUS3dA2X6

с помощью этого:

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

затем я добавляю класс "append" в кнопку и добавляю этот код, который находится ниже ,, и после этого он перестал работать, "его класс не 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>

просто я хочу, чтобы, когда я нажимал на назначить btn, то нижеприведенная форма появлялась один раз с fini sh btn, а когда я нажимал снова и снова, тогда он шел без кнопки fini sh, как https://ibb.co/QYCR45P

Ответы [ 6 ]

1 голос
/ 05 февраля 2020

проверить это ..

$(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>
0 голосов
/ 05 февраля 2020

Полагаю, вы бы поместили свой код в пустой тег. Ваш код не ясен, но я могу вам помочь. Взгляните на этот фрагмент кода, может быть полезно:

--- Прежде чем вам вообще понадобится span для добавления вашей формы:

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

--- В вашем теге скрипта (вставьте в конце перед):

<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>

Код вашей таблицы помещается между ´´, чтобы избежать каскадных строк.

Надеюсь, этот ответ поможет вам!

0 голосов
/ 05 февраля 2020

Если вы хотите добавить несколько строк элемента html, поэтому необходимо добавить этот оператор `.
Я надеюсь, что приведенный ниже фрагмент поможет вам.

$('.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>
0 голосов
/ 05 февраля 2020

Я думаю, что приведенный ниже код решит вашу проблему

$('.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>
0 голосов
/ 05 февраля 2020

Вы должны предоставить шаблон в виде одной строки, ie без разрывов строк и использовать tilde operator (`), чтобы указать начало и конец строки шаблона.

Я полагаю, вы добавляете это таблица элемента DOM (div или форма), имя класса которого 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>`);
});
0 голосов
/ 05 февраля 2020

попробуйте использовать это:

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...