Question

我无法找到任何关于我在本网站或其他任何网站上挣扎的内容的讨论，但也许我没有提出正确的问题。我正在使用由raspberry pi驱动的无线扬声器的Web界面，并且（我继承了它）几乎所有的POST请求都是通过调用$.ajax. $().ready()完成的，如下所示：

    $().ready(function (){
        $(document).ajaxStart(function (){ 
            $.blockUI({ message: '<img id="loadimg" src="img/loading.gif" width="64"  />'}); 
        }).ajaxStop($.unblockUI);

    $("nav.setup-nav a").not("[target='_blank']").on("click", function (event){
        event.preventDefault();
        var href=$(this).attr('href');
        $.ajax({
            type:"POST",
            url:href,
            success:function (data){
                $(".contentPanel").html(data);
                $(this).blur();
                $("html, body").animate({ scrollTop:100, scrollLeft:400}, 600);
                },
            });
            return false;
        }); 
    });

强制导航菜单中链接页面的所有内容加载到页面中心的div内。也就是说，除了具有target="_blank"属性的页面。这是event.preventDefault，并且在链接到我们想要在新窗口中加载的外部页面时，不会调用UI阻止内容。我将尝试简明地描述我的问题：其中一个菜单项是（有条件地）指向基于Web的MPD客户端的链接，我们绝对不希望在同一页面上的div内加载，因此具有target="_blank"属性。问题是用户还可以选择通过Web界面启用或禁用MPD守护程序。 PHP处理所有这些状态变量的设置。基本上是这样的：

    if ($config->is_flag_set($MPD_FLAG))
    { 
        echo '<li><a target="_blank" id="mpd" href="rompr/">Local Playback Web Interface</a></li>';
    }
    else
    {
        echo '<li><a id="mpd" href="local-disabled.php">Local Playback Web Interface</a></li>';
    }

所以当页面首次加载时，如果MPD守护程序没有运行，则指向Web界面的链接指向一个解释MPD未启用的页面。此链接不包含target="_blank"属性。但是，如果导航到设置表单并打开MPD，则有逻辑替换该特定链接的href和目标属性，因此理论上所有应该工作，就好像页面最初加载了MPD标志（如果是明确！）。问题是当＆＃34;取代＆＃34;与target="_blank"（由.prop()或.attr()设置，我已尝试过两者并且它似乎没有区别）的链接被点击，页面仍然在内部加载div！我尝试复制$().ready中定义的点击处理程序，并将其放入我设置链接属性后调用的另一个函数中，但它仍然没有像我想象的那样工作应该！只是为了验证我并不疯狂，我使用.each()来打印所有已经完成但没有target="_blank"属性的链接，并且这些链接都符合我认为它应该是的。为什么被替换的链接没有被视为在点击处理程序中具有target="_blank"属性？顺便说一句，如果MPD关闭，走另一条路并删除target="_blank"属性，就像一个魅力。非常感谢您提出任何答案，如果我复制了上一个问题，我表示歉意！

干杯，

Answer 1

任何时候你必须用ajax重新加载元素时，事件总是很棘手。我发现的最好的方法是将事件附加到一些不会重新加载的容器元素：

$('#always_present_container').on('click', "nav.setup-nav a", function (event){
    if($(this).attr('target') != '_blank'){
        ...
    }

});

这样在单击容器时检查该元素的属性。设置$（'element'）时，单击（）选择器将在页面加载和附加的事件上进行检查，因此当您通过ajax重新加载某些内容时，新元素不会附加此事件。

注意：通常你可以避免函数中的条件语句，但我不知道在css选择器中按目标过滤的简单方法。

Jquery - 在页面加载后已更改的目标元素

1 个答案: