[英]How to toggle edit-in-place functionality in jQuery?
我一直在使用jQuery In Place Editor ,但我不知道如何正確禁用它。 下面是我到目前為止的代碼。
我正在使用jQuery toggle
方法來初始化和終止鏈接列表上的插件功能。 下面的代碼中有些多余的內容可能與我的問題無關,但是為了以防萬一,我把它們留在了那里。
問題是,下面的代碼在我最初的2次單擊(即第一次單擊-啟用editInPlace插件,第二次單擊-禁用它)上可以按我的預期工作,但是它不會在第三次單擊上重新啟用就地編輯功能 。
有什么想法嗎?
(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
;
});
每次用戶單擊時,都會執行傳遞給切換的第一個功能。
將鏈接替換為鏈接的克隆。 當將$.clone()
與參數false一起使用時,所有事件處理程序都將從克隆中刪除。
第二個功能(保持第一個功能不變):
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;
}
找到了可行的解決方案:
$('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.