Question

我在将一个日期选择器添加到选项卡小部件上的ajax加载网站时遇到了一些问题。我会试着解释到目前为止我做了什么。

我首先制作了所有形式和内容，添加了一个日期选择器并确保一切正常。然后我想创建一个选项卡小部件，它会将带有表单的页面加载到其中。虽然这确实有效，并且所有$ _post的东西也都有效，但jQuery似乎不起作用。

是否有任何已知原因，或者这可能是与我有关的特定问题？

如果需要代码来帮助解决这个问题，我稍后会对其进行编辑，但是现在我想知道它是否可能。

请记住，我对所有这些jQuery和AJAX的东西都比较新。提前谢谢！

- 编辑 -

注意：我将脚本包含在每个页面的标题中。

带标签的页面：

查看

<div id="tabs">
<ul>
    <li><a href="../tabs/bericht">Bericht</a></li>
    <li><a href="../main/initiative">Initiatief</a></li>
    <li><a href="../main/profile">Interesse</a></li>
</ul>

爪哇

$(document).ready(function(){
$( "#tabs" ).tabs({collapsible:true, active:false, effect:'ajax'});
});

已加载页面：

$(document).ready(function(){
$('#date').datetimepicker({dateFormat: 'yy/mm/dd'});

var counter = 1;

$("#addButton").click(function () {

    if(counter>10){
            alert("Only 10 textboxes allow");
            return false;
    }   

    var newTextBoxDiv = $(document.createElement('div'))
         .attr("id", 'TextBoxDiv' + counter);

    newTextBoxDiv.after().html('<input type="text" name="requirements' + counter + '" id="requirements' + counter + '" value="" >&nbsp;<input type="text" name="requirementscount' + counter + '" id="requirementscount' + counter + '" value="" size="2"><br>');

    newTextBoxDiv.appendTo("#TextBoxesGroup");


    counter++;
 });

 $("#removeButton").click(function () {
if(counter==1){
      alert("No more textbox to remove");
      return false;
   }   

counter--;

    $("#TextBoxDiv" + counter).remove();

 });
});

（这足以让它起作用吗？）

Answer 1

$(document).ready()仅在主页中有效。

使用AJAX加载新内容时，ready事件已经发生，因此您的ajax加载代码将立即触发。这意味着如果您加载的代码在它引用的html之前，它将在该html存在之前触发。

您可以通过以下几种方式解决这个问题：

将ajax加载的代码放在它引用的文件中，该文件是ajax加载的

或

使用选项卡的加载回调来运行ajax内容的代码

Answer 2

您已在文档就绪时使用了datepicker函数，但此时您的日期元素未在DOM中注册，因此要使datepicker正常工作，您必须在加载ajax内容后调用$（＆＃39;＃date＆＃39;）。datetimepicker（{dateFormat：＆＃39; yy / mm / dd＆＃39;}）函数。

为此，您必须使用Tabs回调方法＆＃34;加载＆＃34;

$(document).ready(function(){
$( "#tabs" ).tabs({
load: function( event, ui ) {
    if($('#date').length>0){
                $('#date').datetimepicker({dateFormat: 'yy/mm/dd'});
    }
}
});
});

jQuery widget里面的jQuery ajax选项卡

2 个答案: