jQuery“创build”事件dynamic创build的元素
我需要能够dynamic地创build<select>元素，并把它变成jQuery .combobox() 。 这应该是元素创build事件，而不是一些“点击”事件，在这种情况下，我可以使用jQuery .on() 。
那么这样的事情存在吗？
$(document).on("create", "select", function() { $(this).combobox(); }
我不愿意使用livequery，因为它非常过时。
更新提到的select/combobox通过ajax加载到一个jQuery的colorbox（模式窗口），因此，问题 – 我只能启动combobox使用colorbox onComplete ，但是改变一个combobox另一个select/combobox必须dynamic创build，因此，我需要一个更通用的方法来检测元素的创build（在这种情况下select ）。
UPDATE2为了进一步尝试和解释问题 – 我有recursion创buildselect/combobox元素，里面还有很多启动代码.combobox() ，因此如果我使用经典的方法，就像在@ bipen的答案 ，我的代码会膨胀到疯狂的水平。 希望能更好地解释这个问题。
UPDATE3谢谢大家，我现在明白，由于DOMNodeInserted弃用有一个遗留在DOM变异的空白，并没有解决这个问题。 我只需要重新考虑我的申请。
您可以on DOMNodeInserted事件中获取事件，以便通过代码将其添加到文档中。
$('body').on('DOMNodeInserted', 'select', function () { //$(this).combobox(); }); $('<select>').appendTo('body'); $('<select>').appendTo('body');
在这里摆弄： http : //jsfiddle.net/Codesleuth/qLAB2/3/
编辑：阅读后我只需要仔细检查DOMNodeInserted不会导致跨浏览器的问题。 从2010年的这个问题表明，IE不支持这个事件，所以如果可以的话，testing它。
看到这里： [链接] 警告！ 本规范中定义了DOMNodeInserted事件types以供参考和完整，但本规范不赞成使用此事件types。
您可以使用DOMNodeInserted突变事件（不需要委托）：
$('body').on('DOMNodeInserted',function(e){ var target = e.target; //inserted element; });
编辑： 突变事件 不推荐使用 ，而是使用突变观察者
刚刚想出了这个解决scheme，似乎解决了我所有的Ajax问题。
对于准备好的事件我现在使用这个：
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'); });
这可以通过DOM4 MutationObservers完成，但只能在Firefox 14 + / Chrome 18+（现在）中使用。
然而，有一个“ 史诗般的黑客 ”（作者的话不是我的！），支持所有浏览器支持的CSS3animation是：IE10，火狐5 +，铬3 +，歌剧12，Android 2.0以上，Safari 4 +。 从博客中查看演示 。 黑客是使用一个CSS3animation事件与一个给定的名字，观察和行事的JavaScript。
一种看起来很可靠的方法（虽然只在Firefox和Chrome中testing过）是使用JavaScript来监听animationend结尾（或者camelCased，前缀同级animationEnd ）事件，并且应用一个短暂的（在0.01秒的演示中）animation到您计划添加的元素types。 这当然不是一个onCreate事件，而是（在兼容的浏览器中） onInsertiontypes的事件; 以下是一个概念validation：
$(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：
/* vendor-prefixed alternatives removed for brevity */ @keyframes added { 0% { color: #fff; } } div { color: #000; /* vendor-prefixed properties removed for brevity */ animation: added 0.01s linear; animation-iteration-count: 1; }
JS小提琴演示 。
显然，CSS可以调整以适应相关元素的位置，以及jQuery中使用的select器（它应该尽可能地接近插入点）。
活动名称的文件：
Mozilla | animationend Microsoft | MSAnimationEnd Opera | oanimationend Webkit | webkitAnimationEnd W3C | animationend
参考文献：
- caniuse.com CSSanimation兼容性摘要 。
- CSS AnimationEvent接口（W3C） 。
- JavaScript
animationend供应商支持 。
对我来说绑定到身体不起作用。 使用jQuery.bind（）绑定到文档。
$(document).bind('DOMNodeInserted',function(e){ var target = e.target; });
有一个插件， adampietrasiak / jquery.initialize ，它基于MutationObserver实现这一点。
$.initialize(".some-element", function() { $(this).css("color", "blue"); });
用id创build一个<select> ，将其附加到文档..并调用.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();
这应该做的伎俩..你可以隐藏select，如果你想和之后.combobox显示它..或其他使用查找..
$(document).find('select').combobox() //though this is not good performancewise
如果你正在使用angularjs，你可以编写你自己的指令。 我有bootstrapSwitch相同的问题。 我必须调用$("[name='my-checkbox']").bootstrapSwitch(); 在JavaScript中，但我的HTMLinput对象不是在那个时候创build的。 所以我写一个自己的指令，并用<input type="checkbox" checkbox-switch>创buildinput元素
在指令中，我编译元素以通过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(); } } });
