克隆时的jquery-plugin的日期选择器不工作

我在其中的两个文本框每个块都克隆了以下代码(标记和JavaScript)。 每个块包含2个文本框; 一个用普通的文本框; 另一种是文本框与关联日期选择器插件(“textboxDueDate”的ID)。 只有第一个/原创作品与弹出日历时,用户点击里面。 然而,克隆“textboxDueDate”文本框没有被点击里面,当他们弹出日历显示。 有什么错我的代码?

<div> <input type="button" id="buttonAddBookTrack" value="Add Another Book Track" /> </div> <div id="divTemplate"> <fieldset> <legend>Book</legend> <div> <label>Book ISBN: </label> <input type="text" /> </div> <div> <label>Due Date: </label> <input type="text" id="textboxDueDate" /> </div> </fieldset> </div> <div id="divOtherBooks"></div> <!-- java script ----> <script type="text/javascript"> var _idCount = 1; $(document).ready(function () { $('input[id^=textboxDueDate]').datepicker(); $('#buttonAddBookTrack').click(function () { var appendedDiv = $('<div>').appendTo('#divOtherBooks').data('divClonedTemplate', '_' + _idCount); $('#divTemplate').children().clone().appendTo(appendedDiv); $('input[id^=textboxDueDate]').not('.hasDatePicker').datepicker(); _idCount++; }); }); </script>

--------------解决方案-------------

确保两件事:

a)将克隆的文本字段后'hasDatePicker“类

B)一个唯一的ID添加到文本字段

检查工作代码

var _idCount = 1;

$(document).ready(function () {
$('input[id^=textboxDueDate]').datepicker();

$('#buttonAddBookTrack').click(function () {
var appendedDiv = $('<div>')
.appendTo('#divOtherBooks')
.data('divClonedTemplate', '_' + _idCount);

var nodeO=$('#divTemplate').children().clone()
$(nodeO).find('input[id^=textboxDueDate]')
.attr('id','textboxDueDate_'+_idCount)
.removeClass('hasDatepicker')
.datepicker()

$(nodeO).appendTo(appendedDiv)

_idCount++;
});
});

你和修剪的代码,我已经添加了额外的代码行仅仅是为了清楚

编辑:为什么removeClass('hasDatepicker')

()实际上检查类的日期选择器,以确定是否日期选择对象不为给定的文本限定。 在你的情况,当你克隆你的类作为garbage被启动,防止日期选择器()

用深clone

$('#divTemplate').children().clone(true, true).appendTo(appendedDiv);

具有保持绑定到原始元素中的事件的问题。

因此,绑定事件,而不是克隆之后:

$(document).ready(function () {
$('#buttonAddBookTrack').click(function () {
var $appendedDiv = $("#divTemplate")
.clone()
// Remove divTemplate's id
.removeAttr("id")
.appendTo('#divOtherBooks')
.data('divClonedTemplate', '_' + _idCount);
$("#textboxDueDate", $appendedDiv)
// Remove datepicker plugin data
.removeData("datepicker")
// Remove element's parent id
// Note: DatePicker will automatically generate an id
.removeAttr("id")
.datepicker();
_idCount++;
});
});

你可以节省步骤,从克隆的元素删除的DatePicker数据,如果您保证您divTemplate元素将不会在任何地方使用。

分类:jQuery的 时间:2012-01-01 人气:1
本文关键词: jQuery的
分享到:

相关文章

  • 这是为什么jQuery的这么慢? 2012-01-01

    我用一个jQuery插件,它修正了我生成一个HTML表头. 不幸的是,插件的性能非常慢,我已经把范围缩小到下面的代码: var $tbl = $(this); var $tblhfixed = $tbl.find("thead"); $tblhfixed.find("th").each(function () $(this).css("width", $(this).width()); }); 这是考虑大约40秒到表中,即2000行. 有谁知道它

  • jQuery的日期选择器不工作的ASP.NET 2012-01-01

    我到处都找过解决这个问题,我收到的所有建议都没有奏效. 这是我在导入的内容: <link href="css/jquery-ui-1.8.12.custom.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.5.1.js" type="text/javascript"></script> &

  • jQuery插件浮动列和行标题 2012-01-01

    我有一个HTML <table>既宽和高. 因为它需要横向垂直滚动,我想使用jQuery浮动列标题( <thead> 和行头文件( <th>的标记<tbody> 似乎有很多是做插件的<thead>如本),但是否有任何两者都做列和行头? 请注意,我不是在寻找,增加了滚动条到我的桌子的两侧插件. 我想头,如果他们滚动出浏览器窗口浮动. --------------解决方案------------- http://meetselva.github.io

  • 收藏夹jQuery的显示文本 2012-01-01

    我使用jQuery的收藏夹,有没有一种方式来显示图像或二者的文本字段istead? 或者另一种方式展现在收藏夹弹出的文本? --------------解决方案------------- 尝试的ThickBox 去这个兄弟......这会作罢确切的移动你想要http://www.swsemarketing.com/blog/42/How_To_Create_A_Lightbox_To_Display_Text_Or_Images/ 什么更好的动画? 的ThickBox是假的比较与灯箱2 Fanc

  • jQuery的.nextUntil()相当于 2012-01-01

    我需要jQuery的替代.nextUntil() 我目前使用jQuery 1.3.1和更新是不可能的:( 我有这样的HTML: <h4>...</h4> <p>...</p> <p>...</p> <p>...</p> <h4>...</h4> <p>...</p> <p>...</p> 我有这样的jQuery代码: $('h4').cli

  • 如何使用停火与无尽的滚动jQuery插件 2012-01-01

    滚动jQuery插件. 一切工作正常,但我无法理解的停火选项. 我想停止后10次作出回调. $(document).endlessScroll({ fireOnce: true, fireDelay: 3000, bottomPixels: 750, insertAfter: "ul#articlePagedList li:last", loader: "<div id='processing'><img src='${pageContext.request

  • 内容加载到使用jQuery的div和春天返回400错误的请求消息 2012-01-01

    我百思不得其解,我有jQuery的通话使用.load以填补与转换的XML组成成HTML内容的DIV,但每当我打电话负荷(或$不用彷徨,或为此事$阿贾克斯),我得到一个"400错误请求 - 客户端发送的请求是语法不正确"的消息. 这些参数都在那里,甚至当我设置了一个测试要求的网页不带任何参数,我得到了同样的信息. 所有这一切都正在通过Spring(V3)与注解控制器完成. 什么是令人困惑的是,我已经有这个通过调用Web服务返回一个JSON对象填充SELECT和工作正常工作的一部分. 如何

  • jQuery的周期插件加载问题 2012-01-01

    我使用jQuery周期插件的图像幻灯片. 在我的HTML页面创建一个无序列表( ul )与类名list <ul class="slide"> <li> <img src="some_photo.png" /> <li> <li> <img src="another_photo.png" /> <li> <ul> 在我的HTML页面,我加载在头部分二种J

  • 在ASP.NET MVC 3 aspplication观点jQuery的自动完成文本框看起来并不如预期 2012-01-01

    我的输入域代码: <input type="text" id = "selectedTenderName" name="selectedTenderName" /> 在这里,我添加到js文件的引用: <script src="../../Scripts/jquery-ui-1.8.14.min.js" type="text/javascript"></script> &l

  • 在Firefox PHP的jQuery的错误 2012-01-01

    我在与一些JavaScript的麻烦,并希望有人也许能够帮助! 首先,这里是代码: function Client_Selected() { var temp = $("input:radio[name='selected_client']:checked").val(); var f_input_name = "fname_" + temp; var l_input_name = "lname_" + temp; var first = $(&

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 0.205 (s). 10 q(s)