Javascript jQuery"；论创造；动态创建的元素的事件

我需要能够动态创建

元素，并将其转换为jQuery

.combobox（）

。这应该是元素创建事件，而不是一些“单击”事件，在这种情况下，我可以使用jQuery

.on（）

那么这样的事情存在吗

$(document).on("create", "select", function() {
    $(this).combobox();
}

我不愿意使用livequery，因为它已经过时了

更新提到的选择/组合框通过ajax加载到jQuery colorbox（模式窗口）中，因此问题-我只能使用colorbox

onComplete启动组合框

，但是在更改一个组合框时，必须动态创建另一个选择/组合框，因此，我需要一种更通用的方法来检测元素的创建（本例中为

select

）

UPDATE2为了尝试进一步解释这个问题-我递归创建了

select/combobox

元素，在

.combobox（）

中也有很多启动代码，因此如果我使用经典方法（如中），我的代码会膨胀到疯狂的程度。希望这能更好地解释问题

UPDATE3谢谢大家，我现在了解到，由于对

DOMNodeInserted

的弃用，DOM变异中仍然存在一个空白，这个问题没有解决方案。我必须重新考虑我的应用程序。

创建一个id为的

，将其附加到文档中。。然后调用

.combobox

  var dynamicScript='<select id="selectid"><option value="1">...</option>.....</select>'
  $('body').append(dynamicScript); //append this to the place your wanted.
  $('#selectid').combobox();  //get the id and add .combobox();

您可以使用

DOMNodeInserted

事件获取代码添加到文档中时的事件

$('body').on('DOMNodeInserted', 'select', function () {
      //$(this).combobox();
});

$('<select>').appendTo('body');
$('<select>').appendTo('body');

$（'body'）。在（'DOMNodeInserted'，'select'，函数（）{
//$（this.combobox（）；
});
$（''）。附于（'正文'）；
$（''）。附于（'正文'）；

在这里摆弄：

编辑：在阅读之后，我只需要再次检查

domanodeinserted

是否会在不同浏览器之间造成问题。从2010年开始，IE不支持该活动，所以如果可以，请测试它

请看这里：警告！本规范中定义了DOMNodeInserted事件类型以供参考和完整性，但本规范禁止使用此事件类型。

您可以使用

DOMNodeInserted

突变事件（无需授权）：

编辑：如果已弃用，请改用

这可以通过使用来完成，但只适用于Firefox 14+/Chrome 18+（目前）

然而，有一个“”（作者的话不是我的！）可以在所有支持CSS3动画的浏览器中使用，这些浏览器包括：IE10、Firefox 5+、Chrome 3+、Opera 12、Android 2.0+、Safari 4+。请参阅博客中的。黑客使用的是一个CSS3动画事件，该事件具有一个在JavaScript中观察和执行的给定名称。

一种似乎可靠的方法（尽管只在Firefox和Chrome中进行了测试）是使用JavaScript来监听

animationend

（或其带骆驼壳且前缀的兄弟

animationend

）事件，并对计划添加的元素类型应用短期（在演示中为0.01秒）动画。当然，这不是

onCreate

事件，而是（在兼容浏览器中）近似于

onInsertion

类型的事件；以下是概念证明：

$(document).on('webkitAnimationEnd animationend MSAnimationEnd oanimationend', function(e){
    var eTarget = e.target;
    console.log(eTarget.tagName.toLowerCase() + ' added to ' + eTarget.parentNode.tagName.toLowerCase());
    $(eTarget).draggable(); // or whatever other method you'd prefer
});

使用以下HTML：

<div class="wrapper">
    <button class="add">add a div element</button>
</div>

显然，CSS可以调整以适应相关元素的位置，以及jQuery中使用的选择器（它应该尽可能接近插入点）

事件名称的记录：

Mozilla   |  animationend
Microsoft |  MSAnimationEnd
Opera     |  oanimationend
Webkit    |  webkitAnimationEnd
W3C       |  animationend

参考资料：

---

对我来说，绑定到身体不起作用。使用jQuery.bind（）绑定到文档不需要

---

刚刚提出了这个解决方案，它似乎解决了我所有的ajax问题
对于on ready事件，我现在使用以下方法：

function loaded(selector, callback){
    //trigger after page load.
    $(function () {
        callback($(selector));
    });
    //trigger after page update eg ajax event or jquery insert.
    $(document).on('DOMNodeInserted', selector, function () {
        callback($(this));
    });
}

loaded('.foo', function(el){
    //some action
    el.css('background', 'black');
});

$(document).on('click', '.foo', function () {
    //some action
    $(this).css('background', 'pink');
});

对于正常触发事件，我现在使用：

function loaded(selector, callback){
    //trigger after page load.
    $(function () {
        callback($(selector));
    });
    //trigger after page update eg ajax event or jquery insert.
    $(document).on('DOMNodeInserted', selector, function () {
        callback($(this));
    });
}

loaded('.foo', function(el){
    //some action
    el.css('background', 'black');
});

$(document).on('click', '.foo', function () {
    //some action
    $(this).css('background', 'pink');
});

---

如果您使用的是angularjs，您可以编写自己的指令。我和bootstrapSwitch有同样的问题。我得打电话

$（“[name='my-checkbox']”）。bootstrapSwitch（）
在javascript中，但当时没有创建我的html输入对象。因此，我编写了一个自己的指令，并使用

在指令中，我编译元素以通过javascript获得访问权限，并执行jquery命令（如
.combobox（）
命令）。非常重要的是删除该属性。否则，该指令将调用自身，并且您已经构建了一个循环

app.directive("checkboxSwitch", function($compile) {
return {
    link: function($scope, element) {
        var input = element[0];
        input.removeAttribute("checkbox-switch");
        var inputCompiled = $compile(input)($scope.$parent);
        inputCompiled.bootstrapSwitch();
    }
}
});

有一个插件，它基于MutationObserver，可以简单地实现这一点

$.initialize(".some-element", function() {
    $(this).css("color", "blue");
});

正如在其他几个答案中提到的，已被弃用，因此您应该使用。因为还没有人给出任何细节，所以这里是

基本JavaScript API
MutationObserver的API相当简单。这并不像突变事件那么简单，但还是可以的


函数回调（记录）{
记录。forEach（函数（记录）{
var列表=记录。添加的节点；
var i=list.length-1；
对于（；i>-1；i--）{
如果（列表[i].nodeName=='SELECT'）{
//在这里插入代码。。。
控制台日志（列表[i]）；
}
}
});
}
var observer=新的MutationObserver（回调）；
var targetNode=document.body；
observer.observe（targetNode，{childList:true，subtree:true}）

//用于测试
setTimeout（函数（）{
var$el=document.createElement（'select'）；
文件.正文.附件（el美元）；
}, 500);
我认为值得一提的是，在某些情况下，这会起作用：

$( document ).ajaxComplete(function() {
// Do Stuff
});

而不是

$(".class").click( function() {
    // do something
});

你可以写

$('body').on('click', '.class', function() {
    // do something
});

你可能已经准备好了吗<代码>$（选择）.ready（函数（）{}）
@PabloBanderas
ready
用于：“指定DOM完全加载时要执行的函数。”（来自jquery.com）为什么不在创建/插入时而不是之后应用
combobox（）
方法？@DavidThomas试图在我的第二次更新中解释原因。
$（文档）。on（“完成”、“选择”功能(
$(".class").click( function() {
    // do something
});

$('body').on('click', '.class', function() {
    // do something
});