将onclick事件添加到仅在最后一个元素上起作用的新html元素
姆塔吉乌斯
问题是，当我在页面底部创建页码按钮时，onclick只能与最后创建的元素一起使用。
这是页面按钮的外观：
for(var i = 0; i < numberOfPages; i++) {
if(Math.floor((((startIndex + 1) / 10) + 1)) == (i + 1)) {
var newElement = document.createElement("u");
document.getElementById("imagesNav").appendChild(newElement);
newElement.id = "imagesNavU";
var newElement = document.createElement("a");
document.getElementById("imagesNavU").appendChild(newElement);
var str = "page" + (i + 1);
newElement.innerHTML = i + 1;
newElement.onclick=function(){currentPageNumber(str);};
} else {
var newElement = document.createElement("a");
document.getElementById("imagesNav").appendChild(newElement);
var str = "page" + (i + 1);
newElement.innerHTML = i + 1;
newElement.onclick=function(){currentPageNumber(str);};
}
if(i + 1 != numberOfPages) {
document.getElementById("imagesNav").innerHTML += " ";
}
}
}
如果该元素是当前页面，则第一个if语句仅将下划线标记放在上面。
编辑：问题已解决。谢谢大家的帮助！
巴尔玛
问题出在循环的这一部分：
if(i + 1 != numberOfPages) {
document.getElementById("imagesNav").innerHTML += " ";
}
这将重新解析imagesNav元素中的所有HTML 。这将创建新<a>元素，这些元素不具有onclick以前的元素所具有的绑定。
相反，您可以附加一个<span>包含空格的元素。
var numberOfPages = 3;
var startIndex = 0;
for (var i = 0; i < numberOfPages; i++) {
if (Math.floor((((startIndex + 1) / 10) + 1)) == (i + 1)) {
var newElement = document.createElement("u");
document.getElementById("imagesNav").appendChild(newElement);
newElement.id = "imagesNavU";
var newElement = document.createElement("a");
document.getElementById("imagesNavU").appendChild(newElement);
var str = "page" + (i + 1);
newElement.innerHTML = i + 1;
newElement.onclick = function() {
currentPageNumber(str);
};
} else {
var newElement = document.createElement("a");
document.getElementById("imagesNav").appendChild(newElement);
var str = "page" + (i + 1);
newElement.innerHTML = i + 1;
newElement.onclick = function() {
currentPageNumber(str);
};
}
if (i + 1 != numberOfPages) {
var span = document.createElement('span');
span.innerHTML = ' ';
document.getElementById("imagesNav").appendChild(span);
}
}
function currentPageNumber(str) {
alert(str);
}<div id="imagesNav">
</div>另一种方法是使用insertAdjacentHTML，它将HTML添加到元素中，而无需重新解析其中已经存在的内容。
document.getElementById("imagesNav").insertAdjacentHTML('beforeend', ' ');
您还应该在循环内看到JavaScript闭合–简单的实际示例，因为使用str变量的方式，所有单击处理程序都将使用循环的上一次迭代中的值。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
XSLT将嵌套元素添加到基于现有元素的最后一个节点
- 2
从最后一个元素开始按顺序将class添加到元素的集合中
- 3
如何使slideToggle仅在单击的第一个元素上起作用？
- 4
拆分熊猫列并将最后一个元素添加到新列
- 5
拆分熊猫列并将最后一个元素添加到新列
- 6
将转义符（\ n）添加到字符串元组的最后一个元素
- 7
将类“ last”添加到while循环中数组的最后一个元素
- 8
将CSS添加到最后一个元素
- 9
仅将最后一个元素添加到 Android 中的 RecyclerView (Kotlin)
- 10
将事件添加到html元素
- 11
Chrome-将元素添加到* ngFor视图时，始终向下滚动到最后一个元素
- 12
将onclick添加到元素，但保持当前的onclick事件
- 13
将一个元素添加到多维数组
- 14
将for循环结果添加到数组，并在最后一个循环之后显示已添加元素的总和
- 15
我有一个循环，想用ajax将类添加到最后4个元素中
- 16
如何使用JavaScript将onclick事件添加到元素
- 17
将onclick事件附加到元素不起作用
- 18
将onclick事件附加到元素不起作用
- 19
jQuery Pro仅在第一个“ mouseover”事件上起作用
- 20
将事件侦听器添加到音频元素不起作用
- 21
Shell Function将元素添加到数组时，将其放置在另一个函数中时不起作用
- 22
单击时，将类添加到HTML列表中的一个且只有一个元素
- 23
将元素添加到另一个div中时如何从HTML中删除元素
- 24
如何将onclick事件添加到动态生成的HTML元素
- 25
playframework：jQuery：将元素添加到视图的列表中，将onclick按钮添加到另一个视图
- 26
过渡仅在一个方向上起作用
- 27
Android listview：有一个listview的标题，如何将click事件添加到textview元素？
- 28
如何删除C ++中添加到链接列表中的最后一个元素
- 29
如何在C++中将元素添加到数组的最后一个
我来说两句