我在最初隐藏的索引页面上引用一个元素,然后在 index.html 页面上用 jquery 显示。无法解释为什么第一个不起作用,即使它应该起作用,但最后一个起作用。我得到一个按下按钮的 id “id='edit1'...2...3..etc” 谢谢!
//why this doesn't work and the next one does???
/*$('.edit-btn').click(function(){
var id = $(this).attr('id');
console.log("btn1:", id);
});
$('.edit-btn').on('click', function(){
var id = $(this).attr('id');
console.log("btn1:", id);
});
*/
var id;
$("body").on("click",".edit-btn",function(){
id = (this.id).replace("edit","");
更新:
使用此函数隐藏和显示容器:
function hideWindowsAndShowOneWindow(sWindowId) {
$('.wdw').hide(); //fadeout 500
$('#' + sWindowId).show(); // fade in 500
}
所以我试图通过 id 引用的 div 容器在页面加载后或可能在页面加载之前被隐藏。我的猜测是在页面加载后...
HTML:
<div class="wdw" id="wdw-events">
<h4>Events text</h4></br>
<div id="content"></div>
<h4>Edit Events</h4></br>
<div>
</div>
它是在用这个 js 脚本加载页面后添加/注入的,但最后一个方法仍然有特殊之处,只是通过文档向下引用按钮的 id 属性:
finalEventsLS.forEach(function (item) {
var date = item.date.day + "/" +item.date.month + "/" + item.date.year;
$('#content').append("<ul><li>" +
"Event nr.: " + item.id + " " +
"Name: " + item.name + " " +
"Topic: "+ item.topic + " " +
"Speaker: "+ item.speaker + " " +
"Date: " + date + " " +
"</li><button class='edit-btn' id='edit" + item.id + "'>Edit</button>
</ul>");
})
很难说,因为你只分享了你的 jQuery。请用您的 HTML 更新。
如果您正在引用在初始页面加载后添加到 DOM 的元素,.click
则不会起作用,因为它只查找最初加载到 DOM 中的元素。相反,您将使用该.on
方法,该方法在初始加载之前和之后查找添加到 DOM 的元素。
更新:
我应该仔细看的。第二段代码不起作用,但使用了 .on 方法,很可能不起作用,因为您仍在尝试访问.edit-btn
元素,此时我假设它是在页面加载后添加的。有效的代码片段是body
首先访问元素。我会尝试用更好的解释来查找和更新,但是该.on
方法仍然需要找到最初存在于 DOM 中的元素。从那里,它可以爬下树寻找.edit-btn
元素。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句