Добавить от Toastr - PullRequest
Новая
       14

Добавить от Toastr

0 голосов
/ 25 мая 2019

Мое желаемое поведение - На странице нажмите на слова «нажмите меня», появится Toastr и появится текстовое поле, пользователь вводит информацию в текстовом поле Toastr, затем нажимает «Добавить», и это добавляет текст изтекстовое поле Toastr На страницу.

Пока что я могу добавить текстовое поле на странице, и я могу создать тостер с текстовым полем с кнопкой добавления (с тем же кодом на странице),но я так и не понял, как добавить из тостера. 

$(document).ready(function() {
  $('#clickText').click(function() {
         toastr["success"]('<div><input class="input-small" value="textbox" id="first-name"/>&nbsp;</div><div><button type="button" id="okBtn" class="btn btn-primary">Close me</button><button type="button" id="inPut" class="btn" style="margin: 0 8px 0 8px">Append</button></div>')

    
  });

 
});     
toastr.options = {
  "closeButton": true,
  "debug": false,
  "newestOnTop": false,
  "progressBar": false,
  "positionClass": "toast-top-right",
  "preventDuplicates": false,
  "onclick": null,
  "showDuration": "300",
  "hideDuration": "1000",
  "timeOut": 0,
  "extendedTimeOut": 0,
  "showEasing": "swing",
  "hideEasing": "linear",
  "showMethod": "fadeIn",
  "hideMethod": "fadeOut",
  "tapToDismiss": false
}

$(document).ready(function() {
  $('#inPut').click(function() {
    var FLname =  "<br>" +
        $('#first-name').val() + " ";

    $('#outPut').append(FLname);
    
  });
 
});     
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!--Toastr Min CSS --> 
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css'> 
<!--Toastr Min JS -->
 <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js'></script>
 

<!--Script Links Above -->

<input type='text' maxlength="25" id='first-name' placeholder="First Name">

<button type="button" id="inPut" class="btn" style="margin: 0 8px 0 8px">Append</button>
 </div>

   



<div id ="clickText"> Click Me! </div>


<div id='outPut'>
    </div>

, заполняя ввод с заполнителем Имя, затем нажимая добавить прямо рядом с полем, добавляет текст на страницу,


Нажав кнопку «Нажми меня!»текст, вызывает Toastr.- я еще не сделал кнопку закрытия работать.

1 Ответ

1 голос
/ 25 мая 2019

Когда вы нажимаете clickText btn, это создает новую кнопку #inPut, и вам необходимо назначить функцию щелчка для новой кнопки

Попробуйте изменить 

$(document).ready(function() {
  $('#clickText').click(function() {
     toastr["success"]('<div><input class="input-small" value="textbox" id="first-name"/>&nbsp;</div><div><button type="button" id="okBtn" class="btn btn-primary">Close me</button><button type="button" id="inPut" class="btn" style="margin: 0 8px 0 8px">Append</button></div>')
 });
});

на 

 $(document).ready(function() {
   $('#clickText').click(function() {
      toastr["success"]('<div><input class="input-small" value="textbox" id="first-name"/>&nbsp;</div><div><button type="button" id="okBtn" class="btn btn-primary">Close me</button><button type="button" id="inPut" class="btn" style="margin: 0 8px 0 8px">Append</button></div>')
      $('#inPut').click(function() {
      var FLname =  "<br>" +
        $('#first-name').val() + " ";

      $('#outPut').append(FLname);

       });
     });
  });

обязательно удалите - <input type='text' maxlength="25" id='first-name' placeholder="First Name">

из другой части кода (код вне тостера)

...