[英]How to toggle edit-in-place functionality in jQuery?
I've been playing around with jQuery In Place Editor and I can't figure out how to properly disable it. 我一直在使用jQuery In Place Editor ,但我不知道如何正确禁用它。 Below is the code I have so far. 下面是我到目前为止的代码。
I'm using jQuery toggle
method to initialize and terminate the plugin functionality on a list of links. 我正在使用jQuery toggle
方法来初始化和终止链接列表上的插件功能。 There are some extra bits in the code below which are probably not related to my issue but I left them there just in case. 下面的代码中有些多余的内容可能与我的问题无关,但是为了以防万一,我把它们留在了那里。
The problem is that the code below works as I expect on first 2 clicks (ie 1st click - enable editInPlace plugin, 2nd click - disable it) but it doesn't re-enable edit in place functionality on 3rd click . 问题是,下面的代码在我最初的2次单击(即第一次单击-启用editInPlace插件,第二次单击-禁用它)上可以按我的预期工作,但是它不会在第三次单击上重新启用就地编辑功能 。
Any ideas why? 有什么想法吗?
(shoppingList.editButton).toggle(function() {
(shoppingList.editButton).attr('value', 'Finish editing');
(shoppingList.$ingrLinks).unbind('click', shoppingList.ingredients) // disable some functionality on links
.addClass('inplace-editor') // add class to links I want to be editable
.removeAttr('href') // make links unclickable
.editInPlace({ // editInPlace plugin initialized
url: 'http://localhost:8000/edit-ingredient/',
show_buttons: true
});
}, function() {
(shoppingList.editButton).attr('value', 'Edit items');
(shoppingList.$ingrLinks).bind('click', shoppingList.ingredients) // bring back the functionality previously removed
.removeClass('inplace-editor') // remove the class from links that were editable
.attr('href', '#') // make the links clickable again
.unbind('.editInPlace') // remove editInPlace plugin functionality
;
});
每次用户单击时,都会执行传递给切换的第一个功能。
replace the links with clones of the links. 将链接替换为链接的克隆。 When using $.clone()
with argument false, all event-handlers will be removed from the clone. 当将$.clone()
与参数false一起使用时,所有事件处理程序都将从克隆中删除。
the 2nd function(leave the 1st function as it is): 第二个功能(保持第一个功能不变):
function() {
(shoppingList.editButton).attr('value', 'Edit items');
//close the editor(s) when still active
$('.inplace_cancel',shoppingList.$ingrLinks).trigger('click');
//create clones of the items
var clones=(shoppingList.$ingrLinks).clone(false)
.each(function(i,o) {
//restore the original behaviour
$(o)//o is a clone
.bind('click', shoppingList.ingredients)
.removeClass('inplace-editor')
.attr('href', '#')
//replace the link inside the document with it's clone
.replaceAll($(shoppingList.$ingrLinks[i]));
});
//assign the clones to shoppingList.$ingrLinks
shoppingList.$ingrLinks=clones;
}
Found a solution that works: 找到了可行的解决方案:
$('input[name="edit-items"]').toggle(function() {
$(this).attr('value', 'Finish editing');
(shoppingList.$ingrLinks).unbind('click', shoppingList.ingredients) // disable highlighting items
.removeAttr('href');
$('.editme').editable("enable");
$('.editme').editable('http://localhost:8000/edit-ingredient/');
}, function() {
$(this).attr('value', 'Edit item');
(shoppingList.$ingrLinks).attr('href', '#');
$('.editme').editable("disable");
(shoppingList.$ingrLinks).bind('click', shoppingList.ingredients) // re-enable highlighting items
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.