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

Question

我在一页上打印一行表格。该行包含一些包含表单元素的列。它很像一个表格，但用的是CSS。

当用户单击一个ID为div的链接时，就会调用一些jQuery，将另一行/div附加到页面。该行包含与上一行相同的一组div和form元素。

我已经将元素命名为date[]、sub_cat_id[]等，这样我就可以在下一页获得要处理的更新数组。

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

在第一行，jQuery日期选择器如期出现。但是，当我单击下面行上的任何日期输入框(新行/输入框是由jQuery追加添加的)时，日期选择器不起作用。

我在想，这可能是因为我给他们都起了相同的名字，所以我给了他们一个唯一的ID。

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

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

<?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>