额外追加后点击功能不起作用

onclick function not working after extra append

本文关键字：功能 不起作用 追加      更新时间：2023-09-26

>我遇到了一个令人恼火的问题，我找不到解决方案。希望你能帮我解决这个问题。欢迎所有帮助。

情况

我已经为我正在处理的网站创建了一个滑块。为了手动在选项卡之间切换，我通过javascript添加了一些可点击的div，它将相应的选项卡带到前面。现在我添加了一个暂停/播放滑块的选项，因此在暂停时它不会在选项卡中循环

。

法典

for ( i = 0; i < imageTextTemp.length; i++)
{
    var temp = [];
    marginLeftValue = i * 23 + 10;
    $(tabs).append( "<div class='subdiv_" + i + "' id='subDiv' style='margin-left: " + marginLeftValue + "px; margin-top: -40px;' onclick='setImageSlider(" + i + ")'></div>");
    temp.push(imageTextTemp[i].getElementsByTagName("location_big")[0].childNodes[0].nodeValue);
    temp.push(imageTextTemp[i].getElementsByTagName("location_small")[0].childNodes[0].nodeValue);
    temp.push(imageTextTemp[i].getElementsByTagName("url")[0].childNodes[0].nodeValue);
    temp.push(imageTextTemp[i].getElementsByTagName("column")[0].childNodes[0].nodeValue);
    imageText.push(temp);
}
marginLeftValue = marginLeftValue + 46;
$(tabs).append( "<div class='pauseplaySlider' id='pauseplay' style='margin-left: " + marginLeftValue + "px; margin-top: -40px;'></div>");

在此过程的稍后阶段，将发生以下情况：

document.getElementById('pauseplay').setAttribute("onclick", "pauseSlider();");
$('#pauseplay').css('background-image', 'url("' + siteUrl + 'includes/images/pause.png")');

解释

imageTextTemp是横幅图像数组。 tabs 是必须在其中显示按钮的div。temp数组对于这种情况不是很有趣，但是因为它位于两个有趣的代码之间，所以我把它留在那里。

问题

现在奇怪的部分：一旦我添加了最后一个追加，在 for 循环之外，for 循环内追加的 onclick 函数就停止工作了。

影响

在添加最后一个pauseplaySlider之前，tabsdiv 在那里做了应有的工作。他们直接将您带到相应的滑块，而无需等待。添加最后一个pauseplaySlider后，tabsdiv 停止工作，但暂停/播放按钮工作正常，没有任何问题。他们应该同时工作。

问题

为什么两者不能同时工作？

试

  • 我已经尝试将 for 循环中的点击更改为alert(" + i + ");这也不起作用。
    • 在 for 循环
  • 外部注释附加后，for 循环中的div 再次开始工作。
  • 将 pauseplaydiv 的点击更改为alert(1);后，实际上没有任何变化。pauseplay给出了值为 1 的警报，而 for 中的div 仍然不起作用。

编辑

在对这个问题做出多次反应后，我更改了以下内容：

  • 我已将document.getElementById('pauseplay').setAttribute("onclick", "pauseSlider();");更改为$('#pauseplay').on("click",function () { pauseSlider(); });

  • 我已将 for 循环中的附加更改为： 

    $(tabs).append( "<div class='subdiv_" + i + "' id='subDiv' style='margin-left: " + marginLeftValue + "px; margin-top: -40px;'></div>");
$('.subdiv_' + i).on("click",function () { setImageSlider(i); });

这确实使代码更加JQuery，但它并不能解决我的问题。

如果你使用jQuery，你可以做这样的事情

$('#pauseplay').on("click", pauseSlider());

你的#pauseplaydiv是动态创建的，所以在这种情况下不应该onclick简单，一旦你使用jquery，你就应该尝试像smth一样

$(tabs).on('click', '#pauseplay', function(){
    //do your stuff
})

当#pauseplay元素动态附加到你的 DOM 时，javascript 无法识别它。

您必须使用事件委派：

j查询：

$(document).on('click', '#pauseplay', function() {
    // your code ..
});
相关文章：