Question

我的网站上有一个类似iOS的文件夹，在javascript中。文件夹中有一些html表单（这意味着只有在打开文件夹后才能看到表单）。此外，我正在尝试在文件夹中实现jquery datepicker，但它不起作用可能是因为在页面加载时隐藏文件夹内容的文件夹javascript代码。我不是那么精通javascript所以如果有人指出我如何修改datepicker的代码工作，我真的很感激。

这是类似iOS的文件夹js代码：

$(function() {
$(".folderContent").hide();

//arrange the background image starting position for all the rows.
//This will allow the background image cut illusion when showing the folder content panel
$(".row").each(function() {

});

//when a folder is clicked,
//position the content folder after the clicked row
//and toggle all folder / app icon that is not the one clicked.
//and toggle the folder content panel
$(".folder").click(function(event) {

    var folderContent = $(".folderContent");
    folderContent.remove();

    var folderContentShown = folderContent.css("display") != "none";

    var clickedFolder = $(this);
    clickedFolder.parent(".row").after(folderContent);

    folderContent.find(".folderName").html( );

    $("body").find(".folder, .app").not(clickedFolder).each(function() {
        if (!folderContentShown) $(this).animate({
            opacity: 0.00
        }, "slow");
        else $(this).animate({
            opacity: 1.00
        }, "slow");
    });

    //clickedFolder.animate({opacity: folderContentShown ? 1.00 : 0.70}, "slow");
    folderContent.slideToggle("slow");
    event.preventDefault();
    });
    });

这是datepicker代码

<script type="text/javascript">

$(function(){
$.datepicker.setDefaults(
$.extend($.datepicker.regional["ru"])
);
$("#datepicker").datepicker();
});
</script>

如果我删除类似iOS的js代码 - datepicker工作正常，所以这绝对是类似iOS的代码的问题。

提前致谢。

更新：

html（slide.js）中包含的最后一个文件是帖子顶部的代码。完整的HTML代码：

<html>
<head>
<link href="slide.css" type="text/css" rel="stylesheet" />
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.16.custom.csss" rel="stylesheet" />
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script src="js/i18n/jquery-ui-i18n.js" type="text/javascript"></script>
<script type="text/javascript" src="slide.js"></script>
</head>
<body>
<table class='buttons_table'>

<tr><td>
<div class='row2'>
<div class='folder2'><span class='button gray medium'>xxxx</span></div>
</div>
</td></tr>

</table>

<div class='folder2Content'><span class='folder2Name'>

<form action='xxx.php' method='post'>
<table class='input_text'>
<tr>
<td>date : </td>
<td>
<script type="text/javascript">

$(function(){
$.datepicker.setDefaults(
$.extend($.datepicker.regional["ru"])
);
$("#datepicker").datepicker();
});
</script>
<input id="datepicker" type="text" name="year" />
</td>
</tr></div></span></table>

Answer 1

当您隐藏该区域时，datepicker不再起作用的原因是因为您不仅隐藏它，而且实际上将其从DOM树中删除。即使您稍后将其重新添加，所有附加的事件和数据也会在此过程中丢失。幸运的是，jQuery实际上可以使用.detach()函数来适应这种情况。因此，您可以使用.remove()来保留附加的事件和数据，而不是使用.detach()。

folderContent.detach();

查看实际操作：http://jsfiddle.net/william/qfXKb/21/。

Javascript隐藏了jquery datepicker？

1 个答案: