假设我有一个两个div,左边div包含带复选框的所有项目,右边一个是空的,但是点击左边div的每个项目的加号按钮我有一个点击处理程序从左边删除所选项目div,并更改该元素的一些属性并添加右div,现在与其他属性一起我应该将右div的添加项的click事件更改为另一个处理程序:
带有加号图标的左侧项目的点击事件被映射到名为(click)='addItem($event)'
的函数,在此函数中我从左侧div中删除目标元素,并更改某些属性,如checked=true, and fa-plus to fa-minus
,但我需要将其单击处理程序更改为另一个函数removeItem($event)
。
我试过的:
addItem(itemId) {
const element = <HTMLInputElement> document.getElementById(itemId);
element.checked = true;
const itemsWrapper = <HTMLInputElement>
document.getElementById('item4select');
const selectedItemWrapper = <HTMLInputElement> document.getElementById('selectedItems');
const selectedItem = itemsWrapper.querySelector('li[data="'+itemId+'"]');
itemsWrapper.removeChild(selectedItem);
selectedItem.setAttribute('data', 'sel_'+itemId)
selectedItem.querySelector('input[type="checkbox"]').setAttribute('id', 'sel_'+itemId);
// Bellow two line are for changing click event.
//selectedItem.querySelector('input[type="checkbox"]').click = 'removeMe($event)';
//selectedItem.querySelector('input[type="checkbox"]').setAttribute('click', 'removeMe($event)');
selectedItem.querySelector('span[refLabel="addItemBtn"]').classList.remove('fa-plus');
selectedItem.querySelector('span[refLabel="addItemBtn"]').classList.add('fa-minus');
selectedItemWrapper.appendChild(selectedItem);
this.checkAllOfSelectedItemsChecked = true;
this.checkAllOfSelectedItemsClass = 'fa-check-square';
}