How can i combine the following with a delegate in jQuery?
I have a #commentContainer
surrounding all the edit开发者_高级运维able elements, and I am dynamically adding editable fields (Jeditable). the editing ability is not working for dynamically loaded items.
/* Bind Jeditable instances to "edit" event. */
$(".edit").editable('/Comment/PostComment/', {
type: 'textarea',
cancel: 'Cancel',
submit: 'OK',
indicator: '<img src="img/indicator.gif">',
tooltip: 'Click to edit...',
event: "edit"
});
/* Find and trigger "edit" event on correct Jeditable instance. */
$(".edit_trigger").bind("click", function () {
$(this).prev().trigger("edit");
});
Event delegation doesn't work for running code when an element is added to the DOM. Some browser event needs to first take place, like a click.
So if you're adding new elements that should have the editable
plugin run against them, you'll need to call it manually as you add them.
$('<textarea>').editable( /* settings */ )
.appendTo( '#commentContainer' );
There is an solution do add jQuery.editable for dynamically added fields.
$("body").on("click",".editable",function(e){
// Add editable plugin
// but! for `focus` instead common `clik` event
$(this).editable('go.to',
{
event : 'focus.editable',
..
..
// Then trigger focus event
}).trigger("focus");
})
精彩评论