Question

我在页面上连续打印一个表单。该行包含几个包含表单元素的列。很像桌子，但在CSS中。

当用户点击ID为add_transaction_row的链接时，会调用一点jQuery，将另一行/ div附加到页面。此行包含与上面一行相同的div和表单元素集。

我已将元素命名为date[]，sub_cat_id[]等，以便我在下一页上获得要处理的更新数组。

我正在使用jQuery datepicker作为日期输入框。我在课堂上有一个名为.datepicker的触发器。

在第一行，jQuery日期选择器按预期显示。但是，当我单击下面行中的任何日期输入框时（jQuery追加添加的新行/输入框），则datepicker不起作用。

我在想，这可能与我的命名方式有关，所以我给了他们一个唯一的ID。仍然没有运气。

我现在认为它与jQuery在页面加载时添加.datepicker有关，然后当我点击底部添加新行时，这是将html添加到源但是在jQuery datepicker加载后它没有选择新的日期/输入框？

如果有人能对此有所了解，我将不胜感激。

<?php

    $my_new_split = '';
    $my_new_split .= '<div class="split_transaction_box">';
    $my_new_split .= '<div class="span-7">' . form_input('date[]', '', 'id="' . random_string('numeric', 8) . '" class="datepicker"') . '</div>';
    $my_new_split .= '<div class="span-7">' . form_dropdown('sub_cat_id[]', $subcategories_options) . '</div>';
    $my_new_split .= '<div class="span-5">' . form_input('reference[]') . '</div>';
    $my_new_split .= '<div class="span-4 last">' . form_input('ammount[]') . '</div>';
    $my_new_split .= '<div class="clearfix"></div></div><!-- /.split_transaction_box -->';

    $my_new_split = trim($my_new_split);

    $replace_this   = array("\r\n", "\n", "\r");
    $my_new_split = str_replace($replace_this, '', $my_new_split);

    $my_new_split = str_replace('"', '\"', $my_new_split);

?>

<script>

    $(document).ready(function() {

        $('#add_transaction_row').click(function() {
            $(".split_continer").append("<?=$my_new_split;?>");
            return false;
        });
    });

</script>

<hr />

<div class="span-24 last">

    <?=form_open('accounts/do_split')?>

    <div class="split_continer">

        <div class="split_transaction_box">

                <div class="span-7"><?=form_input('date[]', '', 'id="' . random_string('numeric', 8) . '" class="datepicker"');?></div>
                <div class="span-7"><?=form_dropdown('sub_cat_id[]', $subcategories_options);?></div>
                <div class="span-5"><?=form_input('reference[]');?></div>
                <div class="span-4 last"><?=form_input('ammount[]');?></div>


            <div class="clearfix"></div>
        </div><!-- /.split_transaction_box -->

    </div><!-- /.split_container --> 

    <br />
    <a href="#" class="button" id="add_transaction_row">Add new split</a>
    <input type="submit" class="button white" value="Save this split" />

    <?=form_close()?>

Answer 1

你完全正确，datepicker不适用于新元素，因为你在jquery附加了datepicker后将这些元素添加到页面中。我自己也遇到过这个问题。我提出了几种方法。

第一种方法是将实时点击处理程序绑定到元素，检查是否应用了datepicker，如果不应用它。

http://jsfiddle.net/uyx67/1/

但也许更好的方法是使用jquery作为对象构建元素并以这种方式应用datepicker

http://jsfiddle.net/4jmkw/3/

两种方式都有效，并且能够胜任。

Answer 2

<script>

    $(document).ready(function() {

        $('#add_transaction_row').click(function() {
            var new_row = jQuery("<?=$my_new_split;?>");
            $(".split_continer").append(new_row);

            $( ".datepicker" ).datepicker({
                numberOfMonths: 2,
                dateFormat: 'DD, d MM, yy'
            });           

            return false;
        });

    });

</script>

使用jQuery append添加输入框的jQuery UI选择器

2 个答案: