Jquery 可编辑动态元素

Jquery 可编辑动态元素,jquery,jeditable,Jquery,Jeditable,我正在使用Jeditable JQuery插件对列表进行就地编辑更改。这适用于页面上现有的列表项 $('.edit').editable('http://localhost:8080/EditInPlace/Editable', { event : "dblclick", callback : function(value, settings) { $(".dropdown dt a span").html(value); $("#resu

我正在使用Jeditable JQuery插件对列表进行就地编辑更改。这适用于页面上现有的列表项

$('.edit').editable('http://localhost:8080/EditInPlace/Editable', {
    event     : "dblclick",
    callback : function(value, settings) {
        $(".dropdown dt a span").html(value);
        $("#result").html("Selected value is: " + getSelectedValue());
    }
});
但是,我在页面上动态添加列表项,这些项不会响应事件处理程序。我假设我需要使用委托事件,就像我用于单击事件一样

$(document).on("click",".edit",function(e){
    alert("click!");
});

我不知道如何将表处理程序添加到委派事件中。有什么建议吗?

委派方法适用于活动。您可以创建一个自定义事件,但为了保持简单,现在只要在每次添加需要的新元素时调用插件即可

这可以在ajax成功回调中进行,也可以在代码中调用任何插入方法后进行,如
append()
html()

为了使代码更简洁,您可以做的几件事是将插件的options对象存储在一个变量中,这样您就不必每次都创建它们,或者创建包含大量插件调用的函数

例如:

var edit={ 
       url: 'http://localhost:8080/EditInPlace/Editable',
       opts:{
            event     : "dblclick",
            callback : function(value, settings) {
                 $(".dropdown dt a span").html(value);
                $("#result").html("Selected value is: " + getSelectedValue());
        }
    }
};

$(selector).append( newContentString).find('.editClass').pluginName(edit.url, edit.opts)

它工作得很好。谢谢无法使存储在变量中的选项正常工作,但我会解决这个问题。