Question

<!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>

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

提前感谢你。

Answer 1

<强>更新

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

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

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

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

但是我建议通过jQuery创建新链接，而不是直接推送html代码，这样你就可以避免使用独特的选择器来查找元素，你可以这样做：

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

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

1 个答案: