Question

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

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

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

有什么想法吗？

Answer 1

您需要MutationObserver，我在片段中使用setTimeout来模拟动态添加的锚。

＆＃13;

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
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你需要使用Satpal所描述的某种类型的Mutation Observer。

但是，JQuery可以帮助您：

＆＃13;

$(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');
    });
});

＆＃13;

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

＆＃13;

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

＆＃13;

另外，我必须调整链接的CSS选择器。

document.ready和window.load无法正常工作

2 个答案: