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>