Question

我一直试图通过AJAX操纵加载到jQuery UI选项卡中的内容。你可以想象，这些元素是未来的＆＃34; DOM元素并且不受普通$（＆＃34; .someClass＆＃34;）函数的操纵。

我使用.live（）读取事件处理现在已经弃用了jQuery 1.7+，并被新的.on（）方法取代。

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

目前包含在$（）中的我的函数在下面。

我认为我对使用点击处理程序的链接的语法是正确的，但我不确定＆＃34; .hide（）＆＃34;的正确方法。我的＆＃34; hiddenStory＆＃34; div at load。

我还认为函数本身不应该包含在整个$（）中吗？

非常感谢任何帮助或建议。

$(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成功......）

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

1 个答案: