将隐藏的 div 加载到 AJAX jQuery UI 选项卡（未来的 DOM 元素）

Question

我一直在尝试操作通过 AJAX 加载到 jQuery UI 选项卡中的内容。 可以想象，这些元素是“未来”的 DOM 元素，不会被普通的 $(".someClass") 函数操作。

我读过使用 .live() 进行事件处理现在已弃用使用 jQuery 1.7+，并被新的 .on() 方法取代。

我的问题是我想隐藏的 div，当它在 AJAX 选项卡中加载时，必须在初始 DOM 加载后进行操作，并且一开始没有绑定到点击事件。

我的函数，目前包含在 $() 中。

我认为对于使用点击处理程序的链接，我的语法是正确的，但我不确定在加载时“.hide()”我的“hiddenStory”div 的正确方法。

我也认为函数本身不应该被包装在一个整体的 $() 中？

任何帮助或建议将不胜感激。

$(function(){
    // this .hiddenStory div below is what I want to hide on AJAX load
    // need syntax and/or new methods for writing this function
$(".hiddenStory").hide();

   // this is a function that allows me to toggle a "read more/read less" area
   // on the "hiddenStory" div
$(".showMoreOrLess").on('click', (function() {
if (this.className.indexOf('clicked') != -1 ) {
    $(this).removeClass('clicked');
    $(this).prev().slideUp(500);
    $(this).html("Read More" + "<span class='moreUiIcon'></span>");
    }
    else {
    $(this).addClass('clicked');
    $(this).prev().slideDown(500);
    $(this).html("See Less" + "<span class='lessUiIcon'></span>");
    }       
}));
});

// prevents default link behavior 
// on BBQ history stated tab panes with    
// "showMoreOrLess" links
$('.showMoreOrLess').click(function (event) 
{ 
 event.preventDefault(); 
 // here you can also do all sort of things 
});
// /prevents default behavior on "showMoreOrLess" links  

Answer 1

您能否通过 CSS 设置 display: none 并在您想要显示元素的内容时覆盖它？另一种选择，如果您必须这样做，则在填充元素的 AJAX 加载的回调中添加 `$(".hiddenStory").hide()。例如：

$(".hiddenStory").load("http://myurl.com", function(){
        $(".hiddenStory").hide();
    }
);

如果你不使用 .load 方法，你应该有某种回调来配合（例如，如果使用 $.ajax 则成功...）