Question

问题在这里我无法添加datepick（）;新创建的项目的功能。

除了那之外，Everythig工作正常。

名为date1和datep1的第一个元素都有datepick并且工作得很好。

我在那里插件：http://keith-wood.name/datepick.html出了什么问题？

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" media="screen" href="../../../includes/my_app/js/datepick/humanity.datepick.css" /> 
        <script type="text/javascript" src="../../../includes/my_app/js/datepick/jquery.datepick.js"></script>
        <script type="text/javascript" src="../../../includes/my_app/js/datepick/jquery.datepick-tr.js"></script>
        <link rel="stylesheet" type="text/css" media="screen" href="../../../includes/my_app/js/datepick/ui-ui-lightness.datepick.css" /> 
        <script>
            $(function() {
                $('#date1').datepick({
                    dateFormat: 'yyyy-mm-dd',
                    yearRange: '1800:2053'
                });
            });
            $(function() {
                $('#datep1').datepick({
                    dateFormat: 'yyyy-mm-dd',
                    yearRange: '1800:2053'
                });
            });
        </script>
    </head>

    <body>
        <form name="stad_alt" id="myForm">
            <h1></h1>

            <div id="first">
                Please Select:
                <select name="myoption">
        <option value="1">First Option</option> 
                </select><br /><br /></div>
            <div id="container">
                <div id="input1" style="margin-bottom:4px;" class="alternate">
                    Name 1: <input type="text" name="the_name1" id="name1" class="textbox" />
                    From :<input type="text" id="date1" name="from1" class="textbox" />
                    To :<input type="text" id="datep1" name="to1" class="textbox" />
                        Photo: <input type="file" id="photo1" name="photo1" class="textbox" />
                </div>

            </div>

            <div>
                <input type="button" id="add" value="Add New" />
                <input type="button" id="delete" value="Delete This" />
            </div>
        </form>

        <script type="text/javascript">
            $(function(){
                var num = 1; //default 1 
                if (num == 1)
                    $('#delete').prop('disabled','disabled');
                $('#add').live('click',function(e) {
                    e.preventDefault();
                    num = num+1;
                    $('#delete').prop('disabled','');
                    $('#date' + num).datepick({
                    dateFormat: 'yyyy-mm-dd',
                    yearRange: '1800:2053'
                    });
                    $('#datep' + num).datepick({
                    dateFormat: 'yyyy-mm-dd',
                    yearRange: '1800:2053'
                    });                    
                    var html = '<div id="input'+num+'" style="margin-bottom:4px;" class="alternate">Name '+num+': <input type="text" name="the_name'+num+'" id="name'+num+'" class="textbox" /> From :<input type="text" id="date'+num+'" name="from'+num+'" class="textbox" /> To :<input type="text" id="datep'+num+'" name="to'+num+'" class="textbox" /> Photo: <input type="file" id="photo'+num+'" name="photo'+num+'" class="textbox" /></div>';

                    $('#container').append('<div id="input'+num+'" style="margin-bottom:4px;" class="alternate">'+html+'</div>');
                    if (num == 10)
                        $('#add').prop('disabled','disabled');
                });

                $('#delete').click(function() {

                    $('#input' + num).remove();
                    num = num -1;
                    if (num == 1)
                        $('#delete').prop('disabled','disabled');
                    $('#add').prop('disabled','');
                });
            });
        </script>

    </body>
</html>

Answer 1

你在那里遇到很多结构性问题，使文件变得混乱;这使得故障排除更加困难。

首先，摆脱那些众多的$(function() {块 - 将你的javascript压缩到一个块中，位于页面底部。头脑中的CSS，javascript包含在正文的最后，然后是页面脚本。

调用您的直接问题是因为当您这样做时：

$('#date' + num).datepick({
    dateFormat: 'yyyy-mm-dd',
    yearRange: '1800:2053'
});
$('#datep' + num).datepick({
    dateFormat: 'yyyy-mm-dd',
    yearRange: '1800:2053'
});

var html = '<div id="input'+num+'" style="margin-bottom:4px;" class="alternate">Name '+num+': <input type="text" name="the_name'+num+'" id="name'+num+'" class="textbox" /> From :<input type="text" id="date'+num+'" name="from'+num+'" class="textbox" /> To :<input type="text" id="datep'+num+'" name="to'+num+'" class="textbox" /> Photo: <input type="file" id="photo'+num+'" name="photo'+num+'" class="textbox" /></div>';

...抛开凌乱的长HTML字符串（使用DOM对象向页面添加内容），这里的问题是你在一个尚不存在的元素上调用datepick方法页。 HTML创建的重要部分应该是 BEFORE ，您尝试与之交互。因此：

var html = '<div id="input'+num+'" style="margin-bottom:4px;" class="alternate">Name '+num+': <input type="text" name="the_name'+num+'" id="name'+num+'" class="textbox" /> From :<input type="text" id="date'+num+'" name="from'+num+'" class="textbox" /> To :<input type="text" id="datep'+num+'" name="to'+num+'" class="textbox" /> Photo: <input type="file" id="photo'+num+'" name="photo'+num+'" class="textbox" /></div>';
$('#container').append('<div id="input'+num+'" style="margin-bottom:4px;" class="alternate">'+html+'</div>');

$('#date' + num).datepick({
    dateFormat: 'yyyy-mm-dd',
    yearRange: '1800:2053'
});
$('#datep' + num).datepick({
    dateFormat: 'yyyy-mm-dd',
    yearRange: '1800:2053'
});

现在做一些功课：

document.createElement - 使用此代替大杂乱的HTML字符串

Script position - 这篇文章与性能有关，但有条理的将有助于您作为开发人员的表现

Divitis - 你有DIV出来了，这是一个非常短的页面。更好地利用CSS

Avoid inline styles - 你已经附上了样式表......使用em！

Use Jquery's document.ready - 那些$(function() {事......哎呀！

Jquery datepicker克隆问题

1 个答案: