Question

我有一组故障的jquery日期选择器，因为我把它们放在一个jquery选项卡插件中，所以只是没有用。

以下是代码：主页面（索引）：

   <?php
include 'all.php';
?>
<html>
    <head>
        <meta charset=iso-8859-1" />
        <link type="text/css" href="css/smoothness/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />
        <link rel="stylesheet" type="text/css" href="css.css"></link>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>    
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
        <script type="text/javascript" src="maskMoney.js"></script>

        <title>Financeiro</title>
    </head>

    <body>
        <script>
    $(function() {
        $( "#tabs" ).tabs({
            ajaxOptions: {
                error: function( xhr, status, index, anchor ) {
                    $( anchor.hash ).html(
                        "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                        "If this wouldn't be a demo." );
                }
            }
        });
    });
    </script>


        <div>
<div id="tabs">
    <ul>
        <li><a href="financeiro_ver.php">Buscar saída</a></li>
        <li><a href="financeiro_criar.php">Criar saída</a></li>
    </ul>
</div>
            </div>
        <script type="text/javascript" src="view.js"></script>
        <script type="text/javascript" src="create.js"></script>
    </body>
</html>

标签的javascript代码（指日期选择器）：标签1（“Buscarsaída”）：

$(
    function(){
        $("#data1 , #data2").datepicker({ 
            dayNames              : ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sabado"], 
            dayNamesMin           : ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sab"], 
            changeMonth           : true,
            changeYear            : true,
            monthNames            : ["Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Outubro","Novembro","Dezembro"],
            monthNamesShort       : ["Jan","Fev","Mar","Abr","Mai","Jun","Jul","Ago","Set","Out","Nov","Dez"],
            showAnim              : "fadeIn",
            dateFormat            : "yy-mm-dd"
        });
    }
    );

标签2（“Criarsaída”）：

$(
    function(){
        $("#data").datepicker({ 
            dayNames              : ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sabado"], 
            dayNamesMin           : ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sab"], 
            changeMonth           : true,
            changeYear            : true,
            monthNames            : ["Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Outubro","Novembro","Dezembro"],
            monthNamesShort       : ["Jan","Fev","Mar","Abr","Mai","Jun","Jul","Ago","Set","Out","Nov","Dez"],
            showAnim              : "fadeIn",
            dateFormat            : "yy-mm-dd"
        });
    }
    );

问题：尊重的javascript效果只会在第一次打开标签页时发生，如果您更改标签页并且更改它会崩溃。

PS：moneyMask也没有工作（在标签之前工作），但我认为它是同一个问题的一部分。

Answer 1

您需要对标签进行更多配置，因为您正在加载它们。

当您在页面中的任何位置加载新的html时，您需要在加载后将插件绑定到该新的html，即使它具有与它替换的html相同的结构，ID等。

您可以在加载ajax内容后触发的选项卡的load选项中执行此操作。您可能还希望查看cache选项，该选项仅在每个选项卡中加载一次ajax内容。

 $( "#tabs" ).tabs({
      load: function(event, ui) {
        var $curr_panel=$(ui.panel);
         $curr_panel.find( selector).datepicker()
     }
 });

您还可以在代码中的任何位置绑定tabsload事件，而不仅仅是在标签初始化代码中。

请参阅Tabs docs

中的“事件”标签

Answer 2

而不是ID #tabs使用datepicker

的类

<script type="text/javascript">
    $(function () {
        $(".datepicker").datepicker();
    });
</script>

Jquery标签内的Jquery datepicker

2 个答案: