jQuery动态函数调用不工作 - jQuery Dynamic Function Calls Not Working

jQuery Dynamic Function Calls Not Working

本文关键字：工作函数调用动态 jQuery | 更新日期: 2023-09-26

我能够在正常情况下完美地使用jQuery easytabs库，但是当我创建动态easytabs时，它不再工作了。我认为它们没有初始化。这是我的代码。我试图初始化每个div有id="制表符"前缀。但是这行不通。

<script src="../js/JSPkg/jquery-migrate-1.2.1.js"></script>
<script src="../js/JSPkg/jquery.hashchange.min.js" type="text/javascript"></script>
<script src="../js/JSPkg/jquery.easytabs.js" type="text/javascript"></script>

Javascript:

<script type="text/javascript">
$(document).ready(function() {
$('div[id^="tab"]').easytabs();
} );
</script>

我有PHP代码在这个Div上循环easytabs:

echo"<div id='tab2-container". $row ['ID']."' class='tab2-container'>
<ul class='etabs2'>
<li class='tab2'><a href='#tab1-". $row['ID'] ."'>Tab1</a></li>
<li class='tab2'><a href='#tab2-". $row['ID'] ."'>Tab2</a></li>
</ul>
<div class='panel2-container'>
<div id='tab1-". $row ['ID'] ."'> TestData1";
echo "</div>
<div id='tab2-". $row['ID'] ."'> TestData2 ";
echo "</div>
</div>
</div> ";

谢谢。

尝试这可能是CSS的问题。不要使用1.7以上版本的jquery，修改js文件路径。

<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-hashchange/v1.3/jquery.ba-hashchange.min.js" type="text/javascript"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.easytabs/3.2.0/jquery.easytabs.min.js" type="text/javascript"></script>
<style>
    /* Example Styles for Demo */
    .etabs2 { margin: 0; padding: 0; }
    .tab2 { display: inline-block; zoom:1; *display:inline; background: #eee; border: solid 1px #999; border-bottom: none; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; }
    .tab2 a { font-size: 14px; line-height: 2em; display: block; padding: 0 10px; outline: none; }
    .tab2 a:hover { text-decoration: underline; }
    .tab2.active { background: #fff; padding-top: 6px; position: relative; top: 1px; border-color: #666; }
    .tab2 a.active { font-weight: bold; }
    .tab2-container .panel2-container { background: #fff; border: solid #666 1px; padding: 10px; -moz-border-radius: 0 4px 4px 4px; -webkit-border-radius: 0 4px 4px 4px; }
    .panel2-container { margin-bottom: 10px; }
  </style>
<?php 
$row ['ID']="xyz";//temporary value taken
echo"<div id='tab2-container". $row ['ID']."' class='tab2-container'>
<ul class='etabs2'>
<li class='tab2'><a href='#tab1-". $row['ID'] ."'>Tab1</a></li>
<li class='tab2'><a href='#tab2-". $row['ID'] ."'>Tab2</a></li>
</ul>
<div class='panel2-container'>
<div id='tab1-". $row ['ID'] ."'> TestData1";
echo "</div>
<div id='tab2-". $row['ID'] ."'> TestData2 ";
echo "</div></div></div> ";
?>
<script>
$(document).ready(function(){
    $('div[id^="tab"]').easytabs();
});
</script>