[英]jQuery append div on click
因此,我正在jQuery中制作此东西,如果用户单击按钮,则会显示div并要求用户输入一些注释(基本上是便签功能)。
HTML和CSS正确完成,唯一的问题是jQuery无法正常工作:
$(document).ready(function() {
$("#top-tabs ul li").hover(function() {
$(this).find("ul>li").stop().fadeToggle(400);
});
$("#submitpnote").on("click", function() {
$("body").append("<div id='pnoteprompt'><input id ='input-pnote'type='text' placeholder='your note title'></input><input id ='input-pnote-p'type='text' placeholder='your note'></input><button id=confirmpnote>confirm note</button></div>");
$("#pnote-prompt").fadeTo(100, 1);
});
$("#confirmpnote").on("click", function() {
var $pnotetitle = document.getElementById("input-pnote").value;
var $pnotep = document.getElementById("input-pnote-p").value;
$("#pnotes-list").append("<div class='pnote-title'><li>" + $pnotetitle + "<br>" + $pnotep + "</li></div>");
$("#pnoteprompt").remove();
});
});
js jQuery文件已正确链接。 只是在submitpnote函数(第二个)中,div不追加。 我单击按钮,但屏幕上没有任何显示。 我试过放置一些hint()调试器,该方法正在运行,但div似乎没有追加。
有人知道为什么会这样吗? 谢谢!
如我所见,confirmpnote是动态创建的内容,因此您无法执行$(#confirmnote),因为在执行代码时该内容将不存在。
对于动态创建的内容,请使用:
(document).on('click', 'selector', function(){
//to stuff
});
例如,选择器将是#confirmpnote
看起来您正在动态添加具有submitpnote
按钮的容器,因此您必须使用.on()
添加even处理程序。
$('body').on('click', '#submitpnote', function(e){
$(e.delegateTarget).append("<div id='pnoteprompt'><input id ='input-pnote'type='text' placeholder='your note title'></input><input id ='input-pnote-p'type='text' placeholder='your note'></input><button id=confirmpnote>confirm note</button></div>");
$("#pnote-prompt").fadeTo(100, 1);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.