0

我有一个简单的 JS 文件，它使用 Jquery 将规则应用于加载的页面。

我从传统开始$(document).ready(function(){

然而，当我加载更多帖子（加载更多按钮）或提交新帖子时，这些规则不适用。我想我明白为什么……虽然不清楚。

有没有办法对每个新添加的帖子应用相同的规则？是直接在 html 代码上定义事件的唯一方法，例如 onclick ....？

我可能是一个非常简单的问题。我会很感激任何答案:)

谢谢

JS代码

    $(document).ready(function(){

    (...)

    $('button#cancel').on('click',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('');
});


    (...)

 }); closes all

我在 load_questions.js 中使用以下代码来加载新帖子：

    $('form.ajax').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);                          
                    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

1

DOMDocumentReady 事件在页面上只触发一次，当整个 HTML 文档被加载和解析时，你应该能够期望在页面上的任何 DOM 元素都会出现。

从此时起，您添加到页面的任何 DOM 元素都需要再次修饰。这可以像再次调用 DOMDocumentReady 处理程序一样简单，在这种情况下，您希望将其设为命名函数，并将该命名函数传递给$(document).ready(...). 像这样的东西：

var onReadyHandler = function() { };
$(document).ready(onReadyHandler);
$.ajax({
   success: function(html) {
      $("ol#list-feed").prepend(html);
      onReadyHandler();
   }
});

现在，处理这个问题的更好方法（我真的不清楚你到底想要完成什么，但这不是一个真正的问题）可能是根本不将任何东西绑定到你的新帖子。如果您关心事件，请使用“事件委托”（jQuery 链接： http ://api.jquery.com/delegate/）将事件绑定到您知道将出现在页面上的容器。这种模式利用了 DOM 中的事件“冒泡”这一事实，这意味着您可以在 DOM 中侦听比您实际想要响应的元素更高的位置，并且只需检查单击事件是否发生在您关心的事件上（ $.delegate 会自动进行此项检查）。最终结果？您绑定的事件处理程序要少得多，因为您没有单独装饰每个帖子。

于 2013-09-20T14:20:59.840 回答