额外附加后onclick功能不起作用答案

【问题标题】：onclick function not working after extra append额外附加后onclick功能不起作用
【发布时间】：2015-03-14 21:18:31
【问题描述】：

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

情况

我为我正在开发的网站创建了一个滑块。要手动在选项卡之间切换，我通过 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 循环外注释 append 后，for 循环内的 div 再次开始工作。
将pauseplay div 的onclick 更改为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，但并不能解决我的问题。

【问题讨论】：

标签： javascript jquery html onclick append

【解决方案1】：

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

你必须使用事件委托：

jQuery:

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

【讨论】：

【解决方案2】：

你的#pauseplay div 是动态创建的，所以简单的onclick 在这种情况下不应该工作，一旦你使用jquery，你应该尝试一下

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

【讨论】：

【解决方案3】：

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

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

【讨论】：