jquery - 监视元素和更改文本的脚本

Question

我正在使用 bootstrap editable 来编辑照片的文本属性。默认情况下，它会显示文本，如果单击它，则会打开带有可编辑文本的小窗口。我想做的就是创建一个脚本，它将用铅笔图标替换文本。我写了这个：

$('#gallery').delegate('.editable-click', 'need_some_event' , function(){
    $(this).text();
    $(this).html('<i class="icon-pencil" ></i>');
}); //end delegate

我有的代码：

<a class="edit editable editable-click" style="float:left; margin-right: 10px" href="#" rel="Photo_text_183" data-pk="183">some text descrtion of photo</a>

之后我想拥有什么：

<a class="edit editable editable-click" style="float:left; margin-right: 10px" href="#" rel="Photo_text_183" data-pk="183"><i class="icon-pencil" ></i></a>

问题是，可编辑的文本是由另一个 javascript 生成的。我基本上需要一些事件来监视所有 .editable-click 类元素，如果它们出现，请删除带有图标的文本。感谢您的任何建议。

Answer 1

也许你可以试着倾听DOMNodeInserted

$(document).on('DOMNodeInserted', function(){
if($(this).find('.editable-text').length > 0){
//do stuff 
}
});

这是一个工作小提琴作为示例http://jsfiddle.net/wvVnQ/1/

因为，如下所述，这是被弃用的，你可以试试这个插件：https ://github.com/naugtur/insertionQuery