document.readyとwindow.loadが動作しない

Question

コンテンツを動的に取得してリンクを作成しているページでjQueryを実行しようとしていますが、動作させることができません。私のコードは単純です：

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

私はこれをdocument.readyとwindow.loadの中に入れましたが、違いはありませんでした。インスペクタのコンソールでも実行しましたが、正常に動作しますが、ライブページでは何の影響もありません。私は自分のコードにconsole.logを追加しました。コードが起動されているのがわかりましたが、動作させる方法を理解できません。

アイデア？

Answer 1

あなたはSatpalに記載されているようなタイプのMutation Observerを使用する必要があります。

しかし、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>