jQuery的日期选择器不工作的动态HTML [英] jQuery datepicker not working on dynamic HTML

问题描述

我也问过这个问题，<一个href="http://stackoverflow.com/questions/30235935/jquery-date-picker-not-working-on-ajax-generated-input-field">before也<一href="http://stackoverflow.com/questions/30240238/jquery-datepicker-not-working-on-dynamically-generated-html">here.然而，没有提出答案的工作。过了几天，这个问题还没有解决。因此，我再次询问，有更多的一些细节，看看是否有人可以帮我把它解决。

I have asked this question before and also here. However, none of the proposed answers worked. And days after, the problem is still not resolved. Hence my asking again, with a few more details to see if someone could help me get it resolved.

我有一个是通过Ajax从服务器侧生成的，并插入到当前页面的输入字段。我的问题是：jQuery的日期选择器不工作时通过Ajax生成它的输入栏，但它的工作原理，当现场直接放置在页面

I have an input field that is generated via Ajax from the server-side, and inserted into the current page. My problem is: the jQuery date picker is not working on the input field when it is generated via Ajax, but it works when the field is directly placed in the page.

下面，我包括我的code的缩小版本。

Below, I include a scaled-down version of my code.

HTML code：

HTML code:

<form id="user-form"></form>

和这里的jQuery的code，它是应该激活日期选择器就可以了。

And here's the jQuery code that's supposed to activate the datepicker on it.

$.ajax({
   type: "GET",
   url: "/inputfield-loader.php" ,
   success: function(data) {
      $('#user-form').html(data);
      $("#datefield").datepicker();
   } 
});

而这里的inputfield-loader.php

And here's inputfield-loader.php

<input type="text" name="firstname" id="firstname"></div>
<div><input type="text" name="email" id="email"></div>
<div><input type="text" name="birthdate" id="datefield"></div>
<div><input type="submit"></div>

一切工作正常，如果输入字段只是硬codeD插入页面。但是，当插入到DOM作为Ajax调用的返回字符串，日期选择器不再工作。然而，当我使用Chrome来检查的DateField 现场，我看到，它已经增加了jQuery的日期选择器类 hasDatepicker 来它表明调用 jQuery.datepicker（）方法奏效。但在点击该领域，我没有看到日期选择器弹出。

Everything works fine if the input field is just hard-coded into the page. But when inserted into the DOM as the return string of an Ajax call, the date picker no longer works. However, when I use Chrome to inspect the datefield field, I see that it has added the jQuery datepicker class hasDatepicker to it, indicating that the call to the jQuery.datepicker() method worked. But on click of the field, I don't see the date picker pop up.

根据@ dfsq的建议，这里是小提琴。它更接近原来的code： http://jsfiddle.net/35kgsjxk/

As per @dfsq's suggestion, here is the fiddle. It comes closer to the original code: http://jsfiddle.net/35kgsjxk/

推荐答案

您错过开幕 DIV 在 inputfield-loader.php标签文件，这可能会导致隐藏一些元素的问题。

You're missing opening div tag in your inputfield-loader.php file, which can cause issue of hiding some elements.

如果您使用的是正确的标题和数据类型的 $ AJAX 它应该工作，因为它的工作：的 http://jsfiddle.net/96d8k2m3/

If you're using correct headers and data type in $.ajax it should work as it's working on: http://jsfiddle.net/96d8k2m3/

这篇关于jQuery的日期选择器不工作的动态HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！