在 Ajax 注入的 HTML 上使用 JQuery editInPlace

Question

我在静态 HTML 页面上成功使用了 JQuery editInPlace 插件。

当 HTML 由 Ajax 调用注入时，它不能使用相同的 HTML。

我知道使用 .on() 例如 '$('.edit_inplace_field').on(...)' 应该有助于解决问题，但我不确定应该如何针对这个特定的插入。

插件：http://code.google.com/p/jquery-in-place-editor/

工作的静态 HTML 代码如下所示：

<p id="name_id" style="background-color: transparent; 
      "class="edit_inplace_field">Enter Name</p>

与静态 HTML 一起使用的关联脚本：

$('.edit_inplace_field').editInPlace({
    callback: function(unused, enteredText) { return enteredText; },
// url: './server.php',
show_buttons: false
});

我们将不胜感激。

Answer 1

使用指向的信息：
1. Dave Hauenstein - jquery live api 和 by
2. 使用http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_live_newel 上的示例我解决了上述问题。

上面使用的事件是 click 事件。考虑到这一点，解决方案：
将上面的 jquery 代码放入 .live() 函数中：

$('.edit_inplace_field').live("click",function() {  
             // --> code from above here, object is replaced by $(this)
     $(this).editInPlace({
         callback: function(unused, enteredText) { return enteredText; },
         show_buttons: false
    }); // --<
});

评论：如果使用更高级的 jQuery 1.7+ 版本，建议使用 .on() 函数。 见here为什么。