Question

基本上我想做这样的事情：

$("#myElement").ready(function(){
    $("#myElement").attr("id", "new-id");
});

这可能吗？我已经看过jQuery live()，现在已弃用，而是建议使用on()，但我见过的所有解决方案都需要将事件处理程序附加到元素上，例如click，hover等我不想附加事件处理程序，我想简单地修改加载的HTML，以及将来加载时。

HTML由ajax加载，在这种特殊情况下，我无权修改ajax文件。

Answer 1

<强> MutationObserver

使用MutationObserver是目前推荐的方法，但浏览器支持需要 IE11 + ：

var target = document.getElementById('content');

var observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
        for (var i = 0; i < mutation.addedNodes.length; i++) {
            var addedNode = mutation.addedNodes[i];
            if (addedNode.id == "myElement") {
                alert("#myElement added!");
            }
        }
    });
});

var config = {
    attributes: true,
    childList: true,
    characterData: true
};
observer.observe(target, config);

Here is a working example

变异事件（已弃用）

此方法已弃用，但会从 IE9 + 提供浏览器支持：

此功能已从网络中删除。虽然有些浏览器可能它仍然支持它，它正在被淘汰。不要使用它在旧的或新的项目中。使用它的页面或Web应用程序可能会破坏时间。

（Above extract taken from here）

对于Mutation Events，有一个名为DOMNodeInserted的事件你可以听，你也可以指定#myElement选择器来获得你想要的确切元素。

此示例使用JQuery：

$(document).on('DOMNodeInserted', '#myElement', function(){
    $("#myElement").attr("id", "new-id");
});

注意：document应该替换为您需要的选择器，您可以越多地限制区域。

Here is a working example（2秒后添加元素）

Answer 2

使用全局ajax：

$(document).ajaxSuccess(function (event, xhr, settings) {
   if(settings.url === "urlOfSpecificAjax" && $("#myElement").length)
      $("#myElement").attr("id", "new-id");
});

这假设ajax请求是使用jQuery完成的，而global选项未设置为false（默认为true）

Answer 3

您需要使用委派选择器。它将查看静态父元素（即在DOM中），然后通过所需的id在其中查找内容。

$('.parent-in-DOM').on('click', '#thing-not-in-DOM',function(){
var id = $(this).attr('id');//$(this) is it
    alert("i found "+id);
});

查看jquery .on（）

Answer 4

修改dom时没有事件发生，因此您无法绑定事件。

您正在使用ajax加载内容，并且希望通过javascript修改内容，因此您必须插入ajax回调

您必须编写一个将由ajax回调函数调用的转换函数：

var transformid = function(){
   $("#myElement").attr("id", "new-id");
}

$.ajax({
  url: "your.php",
}).done(function() {
  transformid();
});

在jQuery中创建元素后如何执行某些代码？

4 个答案: