0

我在 document.ready 下有一些 jquery 函数，我使用 on() 方法将这些函数冒泡到“加载更多”按钮以及向提要列表添加新帖子时。

尽管如此，加载新帖子时我无法隐藏帖子页脚。它在首次加载页面（通过 document.ready）时有效，但不适用于新帖子。我已经直接通过 CSS 尝试过，它可以工作，我添加了一个新帖子。但是，当我单击 textarea 字段（这将触发页脚显示）时，它不起作用。

你有什么建议吗？有没有使用 ON() 方法的方法？

JS代码

$(document).ready(function(){
    $(".footer").hide();
    $(".comments-feed").hide();

    $('ol.list-feed').on('click', '.small-textarea-main-feed', function () {
        $(this).addClass("set-large");
        //$(this).("footer-post").show();
        $(this).next().find('button#cenas').prop('disabled', $(this).val() == '');
        $(this).next('div.footer').slideDown("fast");
        $(this).next('.comments-feed').slideToggle('200');
    });

    $('ol.list-feed').on('keyup', '.set-large', function () {
        $(this).next().find('button#cenas').prop('disabled', $(this).val() == '');
    });

    $('ol.list-feed').on('focusout', '.small-textarea-main-feed', function(){
        if ($(this).val() !== '') {
        } 
        else {
            $(this).removeClass("set-large");
            $(this).siblings('div.footer').hide();
            $(".comments-feed").hide();
        }
    });

    $('ol.list-feed').on('click', 'button#cancel', function () {
        $(this).parents('.footer').hide();
        $(this).parents('.footer').siblings('.small-textarea-main-feed').removeClass('set-large');
        $(this).parents('.footer').siblings('.small-textarea-main-feed').val('');
    });
});

帖子的 HTML 部分

当我第一次加载页面 (document.ready) 时，它会使用 (.footer).hide() 完成我想要的操作。但是，当我添加一个帖子（有一个表格 - 非常简单）时，它会将帖子加载到提要中并且它不会隐藏帖子页脚（下面的代码）。正如我所说，我已经尝试通过使用“display:none;”来更改页脚样式。尽管它会影响所有帖子。

       <div id="" class="footer-condensed">
                                    <textarea class="small-textarea-main-feed" type="text" placeholder="Reply to @Gerardo"></textarea>
                                    <div id="" class="footer-post">
                                        <div id="" class="footer-submit-button" style:"display:none;">
                                            <button type="button" id="cancel" class="btn" onclick="cancel_button();" >Cancel</button>
                                                <span id="footer-btn-margin"></span>
                                            <button  type="button" id="hunch" class="btn btn-info">Hunch</button>
                                        </div>
                                    </div>
                                </div>

用于加载帖子的 JS（是的，我在这里尝试使用 hide() 方法但不起作用 - 正在评论中）

         $('form.cenas').submit(function() {
    // 
    var that = $(this),
    url = that.attr('action'),
    type = that.attr('method'),
    data = {};

    that.find('[name]').each(function(index, value) {

        var that = $(this),
        name = that.attr('name'),
        value = that.val();

        data[name] = value;

    });

    //event.preventDefault();
    $.ajax({

        url: url,
        type: type,
        data: data,
        cache: false, // it will force requested pages not to be cached by the browse
        success: function(html){
                    console.log(html);
                    $("ol#list-feed").prepend(html);
                    $("ol#list-feed li:first").slideDown(600);
                    //$("ol#list-feed > li.footer").hide();
                    //$("li.comments-feed").hide();

                    document.getElementById('set-width1').value='';
                    document.getElementById('tags').value='';

                    if ($("ol#list-feed > li").size() <= 3) {
                        $('#loadmorebutton').hide();
                    } else {
                        $("ol#list-feed > li:last").remove();
                        $('#loadmorebutton').show();
                    }

                }


    });
    //event.preventDefault();
    return false;
});
4

1 回答 1

0

我仍然不完全确定我是否了解您的页面结构，但我认为如下：

  • 您有一个帖子列表，每个帖子都包含一个页脚 (.footer)。
  • 这些页脚在页面加载时全部隐藏 ($(".footer").hide();)
  • 您还有一个用于添加新帖子的表单，并且您希望新添加的帖子显示时隐藏页脚。

如果上述情况正确，您应该可以通过更新成功处理程序来修复它，如下所示：

success: function(html){
            console.log(html);

            //Create a jquery object from the returned html
            var newPost = $(html);

            //Hide the footer in the new post.
            $('.footer', newPost).hide();

            //Add the new post
            $("ol#list-feed").prepend(newPost);


            $("ol#list-feed li:first").slideDown(600);
            //$("ol#list-feed > li.footer").hide();
            //$("li.comments-feed").hide();

            document.getElementById('set-width1').value='';
            document.getElementById('tags').value='';
             if ($("ol#list-feed > li").size() <= 3) {
                $('#loadmorebutton').hide();
            } else {
                $("ol#list-feed > li:last").remove();
                $('#loadmorebutton').show();
            }
        }
于 2013-09-23T13:47:05.737 回答