额外追加后，onclick功能无法正常工作

Question

我走进了一个令人烦恼的问题，我无法找到解决方案。 希望你能帮助我。欢迎大家帮忙。

情况

我为我正在处理的网站创建了一个滑块。要手动切换选项卡，我已经通过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 tabs div之前，应该做的工作。他们直接将您带到相应的滑块而无需等待。添加最后pauseplaySlider tabs div后停止工作，但暂停/播放按钮工作正常，没有任何问题。他们应该同时工作。

问题

为什么不能同时进行这项工作？

试过

• 我已经尝试将for循环中的onclick更改为alert(" + i + ");，这也不起作用。
• 在for循环外注释追加后，for循环中的div再次开始工作。
• 将pauseplay div的onclick更改为alert(1);后，没有任何改变。 pauseplay发出了值为1的警报，并且for中的div仍然不起作用。

修改

在这个问题上多次反应之后我改变了以下内容：

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

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

  $(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，但它并没有解决我的问题。

Answer 1

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

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

Answer 2

您的#pauseplay div是动态创建的，因此简单onclick在这种情况下无法正常工作，只要您使用jquery，就可以尝试使用

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

Answer 3

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

您必须使用事件委派：

jQuery的：

$(document).on('click', '#pauseplay', function() {
    // your code ..
});