我想要的行为-在页面上单击“单击我”,这将打开Toastr,并有一个文本框,用户在Toastr Text框中键入信息,然后单击“ Append”,这将添加Toastr Textbox中的文本到页面。
到目前为止,我可以从页面上的文本框中追加内容,也可以使用带有追加按钮的文本框(带有与页面中相同的代码)制作烤面包机,但是我还没有弄清楚如何从烤面包机中追加内容。
$(document).ready(function() {
$('#clickText').click(function() {
toastr["success"]('<div><input class="input-small" value="textbox" id="first-name"/> </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。-我尚未使关闭按钮起作用。
最佳答案
当您单击到clickText
btn时,将创建一个新的#inPut
按钮,并且需要为新按钮分配点击功能
尝试改变这个
$(document).ready(function() {
$('#clickText').click(function() {
toastr["success"]('<div><input class="input-small" value="textbox" id="first-name"/> </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"/> </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">
从另一部分代码中(烤面包机之外的代码)
关于javascript - 从Toastr追加,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/56304229/