使用jQuery添加输入框的jQuery UI选择器添加
问题描述:
我在页面上打印表单。该行包含几个包含表单元素的列。很像一张桌子,但在CSS中。使用jQuery添加输入框的jQuery UI选择器添加
当用户点击ID为add_transaction_row
的链接时,会调用一点点jQuery来追加另一行/ div到页面。该行包含与上面的行相同的一组div和表单元素。
我已经命名元素date[]
, sub_cat_id[]
等等,以便我得到一个更新的数组来处理下一页。
我在日期输入框中使用了jQuery datepicker
。我有一个类叫.datepicker
的触发器。
第一行jQuery日期选择器按预期显示。但是,当我点击下面的行中的任何日期输入框(新行/输入框的jQuery附加添加),然后datepicker不起作用。
我在想,这可能与我对它们的命名完全相同,所以我给它们提供了一个唯一的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()?>
答
你完全正确,在日期选择器不会对新的元素,因为您要添加这些元素到页面的jQuery附加了日期选择器后工作。我自己遇到过这个问题。我想出了一些做法。
第一种方法是将实时点击处理程序绑定到元素,检查是否应用了日期选择器,如果不应用它。
但也许一个更好的办法是建立使用jQuery为对象的元素和应用的日期选择这种方式
两种方式工作,而做的工作。
答
<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 datepicker来获得它的工作。 '' – 2012-01-18 11:14:32