document.ready和window.load不工作

Question

我想在一个页面上运行一些jQuery，这个页面动态获取内容并创建链接，但无法使其工作。我的代码很简单：

$(".link a[href*='xyz'][href$='pdf']").text('change link text'); 

我已经把它放在document.ready和window.load中，它们都没有区别。我也在检查器的控制台上运行它，它工作正常，但在实时页面上没有任何影响。我添加了一个console.log到我的代码，我可以看到代码被触发，但无法弄清楚如何使其工作。

任何想法？

Answer 1

您需要使用某种类型的Mutation Observer，如Satpal所述。

然而，JQuery的可以帮助你这样的：

$(document).ready(function() { 
 
    $("button").click(function(){ 
 
     $(".link").append('<a class="myLink" href=".pdf"></a>'); 
 
     $(".link").append('<a class="myLink" href=".xyz"></a>'); 
 
    }); 
 

 
    $(".link").bind("DOMNodeInserted", function(){ 
 
     $(".link a[href$='pdf'], .link a[href*='xyz']").text('change link text'); 
 
    }); 
 
});

.myLink { 
 
    display: block; 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: gray; 
 
    border-bottom: 4px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="link"></div> 
 

 
<button>Click Me</button>

此外，我不得不调整你的CSS选择链接。

Answer 2

您需要MutationObserver，在这里我已经使用setTimeout来模拟动态添加的锚。

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; 
 

 
var element = document.querySelector('.link'); 
 
setTimeout(function() { 
 
    $(".link").append('<a class="myLink" href=".pdf">Yahoooooo</a>'); 
 
    $(".link").append('<a class="myLink" href=".xyz">Yahoooooo</a>'); 
 
}, 5000) 
 

 
var observer = new MutationObserver(function(mutations) { 
 
    mutations.forEach(function(mutation) { 
 
    if (mutation.type == "childList") { 
 
     console.log("Nodes inserted changed") 
 
     $(".link a[href$='pdf'], .link a[href*='xyz']").text('change link text'); 
 
    } 
 
    }); 
 
}); 
 

 
observer.observe(element, { 
 
    childList: true //configure it to listen to attribute changes 
 
});

.myLink { 
 
    display: block; 
 
    width: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="link"></div>