Javascript innerHTML创建的链接（标记）无法在jQuery幻灯片面板中加载其href文件_Javascript_Jquery_Html

Javascript innerHTML创建的链接（标记）无法在jQuery幻灯片面板中加载其href文件

javascript jquery html

Javascript innerHTML创建的链接（标记）无法在jQuery幻灯片面板中加载其href文件,javascript,jquery,html,Javascript,Jquery,Html,我的项目是在核心php。我的项目需要基于javascript函数创建一个可单击div列表，在网页右侧显示有关参数的信息。我想要这些可点击的DIV当点击时，打开/隐藏jQuery幻灯片/弹出窗口，该窗口将显示点击链接的更多信息。所以我在互联网上搜索，从GITHUB找到了jQuery幻灯片面板2.0，我觉得它很合适。现在，为了在页面右侧动态创建链接，我使用getElementById函数并通过innerHTML函数将HTML附加到页面右侧。这里我只展示了测试代码。在这段代码中，第一个linka标记是

我的项目是在核心php。我的项目需要基于javascript函数创建一个可单击div列表，在网页右侧显示有关参数的信息。我想要这些可点击的DIV当点击时，打开/隐藏jQuery幻灯片/弹出窗口，该窗口将显示点击链接的更多信息。所以我在互联网上搜索，从GITHUB找到了jQuery幻灯片面板2.0，我觉得它很合适。现在，为了在页面右侧动态创建链接，我使用getElementById函数并通过innerHTML函数将HTML附加到页面右侧。这里我只展示了测试代码。在这段代码中，第一个linka标记是静态创建的，而下一个linka标记是由js的init函数创建的。问题在于，静态创建的第一个链接能够在jQuery幻灯片面板中加载它的href=myfile.html，但JavaScript创建的第二个链接无法在jQuery幻灯片面板中加载它的href=myfile2.html。相反，第二个链接导航到我不想要的myfile2.html。请帮我解决这个问题。我可能犯了一个愚蠢的错误，也可能是JS的问题。在过去的10天里，我一直被这个问题困扰着

提前感谢您。

更新

在上述情况下，在添加所有要附加的元素后调用slidepanel就足够了

旧答案，适用于需要插件的元素稍后创建的更一般情况

该插件的性能非常差，但是从源代码中我们可以发现，该插件不会自动附加元素（查看其属性），这种行为很好。您必须将插件显式地附加到每个需要它的元素。还要小心，因为插件不会检查它是否已经连接到元素。您有很多选择，最快的方法是在推送新链接后添加以下代码：

<!DOCTYPE html>
<html>
    <head> 
        <script src="dev-jquery-1.11.1.min.js">
        </script>
        <script src="js/jquery.slidepanel.js">
        </script>
    <link rel="stylesheet" type="text/css" href="css/jquery.slidepanel.css"></link>

    <script type="text/javascript">
    $(document).ready(function(){
    $('[data-slidepanel]').slidepanel({
    orientation: 'right',
    mode: 'overlay'
    });
    });
    </script>
    <script>
        function init()
        {
         document.getElementById("link23").innerHTML+='<br/><a href="slide.html" data-slidepanel="panel2" style="float:\'left\'">Show Panel2</a>';
        }
    </script>
</head>
<body onload="init();">
    <div>
        <div>
            Hello how are you 
        </div>
        <div>
            <a href="slide.html" data-slidepanel="panel" style="float:'left'">Show Panel</a>
        </div>  
            <div id='link23'>
            <h3>Problematic DIV</h3>
            Hello... all... The link/anchor tag here in this div is created by Javascript's init() function.
            </div>
        </div>
    </body>
</html>

但是，我建议通过jQuery创建新链接，而不是直接推送html代码，这样您就不需要使用唯一的选择器来查找元素，您可以这样做：

$('[data-slidepanel="panel2"]').slidepanel({
  orientation: 'right',
  mode: 'overlay'
});

请提供一个JSFIDLE或至少一个插件链接。这是我下载插件的url。我根据你的建议修改了代码，效果很好。非常感谢你。实际上问题不在于调用jQuery后创建的DOM元素超出了范围。所以它没有反应。。谢谢现在正在工作。

var newLink = $('<a href="slide.html" ...>...</a>'); //Don't put <br/> in newLink!
newLink.slidepanel(...);
$('#link23').append($('<br/>')); //<br/> goes here
$('#link23').append(newLink);