Question

我有一个由动态生成的标签组成的小部件。每个标签由7个手风琴组成。当我动态生成标签时，我也动态添加了Accordions。我不需要的是单击处理程序，它有一个事件参数，指定单击了哪个手风琴，以便我可以将相应的数据添加到该手风琴的div中。代码看起来有点像

 <div class='tab' id='idCallDetailTab'>
        <ul>
            <?php $i=0; foreach ($this->Asp as $item) { $i++; ?>
            <li><a href="#etabs-<?php echo $i; ?>"><?php echo $item['asp']; ?></a></li>
            <?php } ?>
        </ul>
        <?php $i=0; foreach ($this->Asp as $item) { $i++;  ?>
            <div id="etabs-<?php echo $i; ?>" >
            </div>

            <script type="text/javascript">
                var accordian = '<div class="accordion"><h4><a href="#">CallLogin</a></h4><div id="acclogin-<?php echo $i; ?>"></div><h4><a href="#">Call Allocate</a></h4><div id="accallocate-<?php echo $i; ?>"></div><h4><a href="#">Call Attend</a></h4><div id="accattend-<?php echo $i; ?>"></div><h4><a href="#">Call Dispatched</a></h4><div id="accdispatched-<?php echo $i; ?>"></div><h4><a href="#">Call Part Indent</a></h4><div id="accindent-<?php echo $i; ?>"></div><h4><a href="#">Call transfer</a></h4><div id="acctransfer-<?php echo $i; ?>"></div><h4><a href="#">Call Part Recieved</a></h4><div id="accreceived-<?php echo $i; ?>"></div></div>';                 

                $('#etabs-<?php echo $i; ?>').html(accordian);
                $('#acclogin-<?php echo $i; ?>').html('100');
                $('#accallocate-<?php echo $i; ?>').html('200');
                $('#accattend-<?php echo $i; ?>').html('300');
                $('#accdispatched-<?php echo $i; ?>').html('400');
                $('#accindent-<?php echo $i; ?>').html('500');
                $('#acctransfer-<?php echo $i; ?>').html('600');
                $('#accreceived-<?php echo $i; ?>').html('700');
            </script>

        <?php } ?>
    </div >

Answer 1

在标签上调用Ajax单击：
只设置选项卡的 href 属性，它为特定选项卡div调用Ajax网址。

http://jqueryui.com/demos/tabs/ajax.html

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Preloaded</a></li>
        <li><a href="ajax/content1.html">Tab 1</a></li>
        <li><a href="ajax/content2.html">Tab 2</a></li>
        <li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li>
        <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
    </ul>
    <div id="tabs-1">
        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
    </div>
</div>

您可以在此处使用选项自定义更多内容 http://jqueryui.com/demos/tabs/

Answer 2

找到了更好的方法。我没有在同一个文件中添加手风琴，而是将它们添加到另一个html文件中，并通过ajax将该HTML的内容加载到我的标签中（好吧JQuery处理了所有的ajax加载）。我唯一需要添加的是将accordian应用于选项卡的load事件以维护accordian UI

将click事件添加到动态生成的手风琴jquery中

2 个答案: