jquery地址和live方法

Question

//deep linking 
$.fn.ajaxAnim = function() {
    $(this).animW();
    $(this).html('<div class="load-prog">loading...</div>');
}

$("document").ready(function(){
    contM = $('#main-content');
    contS = $('#second-content');
    $(contM).hide();
    $(contM).addClass('hidden');
    $(contS).hide();
    $(contS).addClass('hidden');
    function loadURL(URL) {
        //console.log("loadURL: " + URL);
        $.ajax({ url: URL, 
                beforeSend: function(){$(contM).ajaxAnim();},
                type: "POST",
                dataType: 'html',
                data: {post_loader: 1},
                success: function(data){
                    $(contM).html(data);
                    $('.post-content').initializeScroll();
                    }
        });
    }

    // Event handlers
    $.address.init(function(event) {
        //console.log("init: " + $('[rel=address:' + event.value + ']').attr('href'));
    }).change(function(event) {
        evVal = event.value;
        if(evVal == '/'){return false;}
        else{
            $.ajax({ url: $('[rel=address:' + evVal + ']').attr('href'), 
                    beforeSend: function(){$(contM).ajaxAnim();},
                    type: "POST",
                    dataType: 'html',
                    data: {post_loader: 1},
                    success: function(data){
                        $(contM).html(data);
                        $('.post-content').initializeScroll();
            }});
        }
        //console.log("change");
    })

    $('.update-main a, a.update-main').live('click', function(){
        loadURL($(this).attr('href'));
        return false;
    });

  $(".update-second a, a.update-second").live('click', function() {
    var link = $(this);
        $.ajax({ url: link.attr("href"),
                beforeSend: function(){$(contS).ajaxAnim();},
                type: "POST",
                dataType: 'html',
                data: {post_loader: 1},
                success: function(data){
                    $(contS).html(data);
                    $('.post-content').initializeScroll();
        }});
        return false;
  });

});

我使用 jquery 地址来更新内容，同时维护有用的 url。当点击主导航中的链接时，url 会正确更新，但是当使用 ajax 动态加载链接时，url 地址功能会中断。

我已经使“点击”事件活动起来，允许通过动态加载的链接加载内容，但我似乎无法使地址事件侦听器活动起来，但这似乎是实现此目的的唯一方法。 我的语法是否错误？

$.address.change(function(event) {

如果我将 this : 更改为 this: ，

$.address.live('change', function(event) {

或者 live 方法不适用于此插件？

Answer 1

进入jquery地址插件文件并将这一行：替换

$.fn.address = function (fn) {
    $(this).click(function() {

为：

 $.fn.address = function (fn) {
        $(this).live('click',function() {

使所有动态加载的链接响应地址插件事件侦听器

Answer 2

live 方法仅适用于 jquery dom 元素。不带插件。

live 方法检测 dom 元素是否动态添加到 HTML 并将事件绑定到它。你想说的是：“如果“地址”插件出现在html上，请将事件“更改”绑定到它”。 “地址”插件不是 dom 元素，它不起作用。

Answer 3

首先，简短的回答：不，它不起作用:)

原因部分：.live() 作用于事件，它不关心它们是否是自定义等（在大多数情况下）。最热门的是当您像这样调用 .live() 时，例如：

$(".myThing").live('click', functionToRun);

.live() 在 DOM 的根部创建一个事件处理程序，等待事件冒泡到它。重要的部分：新元素或旧元素以相同的方式冒泡事件，无论它们如何加载。当事件冒泡并到达 DOM 根时，.live() 事件处理程序会检查其选择器是否与具有该事件的元素匹配，如果是，则执行。

使用插件，您想说“嘿，新东西”并在其上运行代码...正如您所看到的，这与 .live() 内部的实际工作方式非常不同。