JQuery DatePicker клонирования проблема - PullRequest
Новая
       5

JQuery DatePicker клонирования проблема

2 голосов
/ 02 ноября 2011

Проблема в том, что я не могу добавить datepick ();функциональность для вновь создаваемых предметов.

Все отлично работает, кроме этого.

Первые элементы, которые называются 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>

1 Ответ

1 голос
/ 03 ноября 2011

У вас много структурных проблем, что делает документ беспорядочным;это усложняет поиск и устранение неисправностей.

Прежде всего, избавьтесь от этих многочисленных $(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 должна идти ДО , с которой вы пытаетесь взаимодействовать.Таким образом: 

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

Позиция сценария - Статья связана с производительностью, но ее организация поможет ВАШЕЙ производительности как разработчику

Divitis - У вас есть DIV, выходящие из Wazoo, и это довольно короткостр.Используйте все преимущества CSS

Избегайте встроенных стилей - у вас есть прикрепленные таблицы стилей ... используйте em!

Используйте документ Jquery.ready - эти $(function() { вещи ... гадость!

...