jQuery 小部件在 jQuery ajax 选项卡中答案

【问题标题】：jQuery widget Inside jQuery ajax tabsjQuery 小部件在 jQuery ajax 选项卡中
【发布时间】：2014-06-02 10:15:15
【问题描述】：

我在将日期选择器添加到选项卡小部件上的 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>

Java

$(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();

 });
});

（这足以让它工作吗？）

【问题讨论】：

如果在加载 ajax 数据后初始化 datepicker 应该可以正常工作。显示您的代码。 @Joe... 在 ajax 和事件委托之后初始化插件是不同的问题

标签： javascript php jquery ajax codeigniter

【解决方案1】：

您已经在文档就绪时使用了 datepicker 功能，但是此时您的日期元素没有在 DOM 中注册，所以要使 datepicker 正常工作，您必须在加载 ajax 内容后调用 $('#date').datetimepicker({dateFormat: 'yy/mm/dd'}) 函数。

为此，您必须对 Tabs 回调方法“加载”进行分类

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

【讨论】：

这一切都有效。但是当我切换到另一个选项卡然后切换回来时，小部件会再次停止加载。
您可以使用 if($('#date').length>0) 来检测特定选项卡内容中是否存在日期元素。

【解决方案2】：

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

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

您可以通过以下几种方式解决它：

将 ajax 加载的代码放在它在 ajax 加载的文件中引用的 html 之后

或

使用标签的加载回调来运行ajax内容的代码

【讨论】：

非常感谢！（blablabla 评论）