动态删除和添加onclick事件

Question

I am dynamically generating html string and add event to it like below

htmlString = "<a href='#' class='save' onclick='callFunc(" + 4 + ")'>";

I now need to dynamically remove this onclick event and readd again with different Id.

How can i achieve it?

Answer 1

Assuming that callFunc is a named function, you can nullify element.onclick then add a new event that is bound to your new id:

var newId = 10; 
var saveLink = document.querySelector('.save');
saveLink.onclick = null;
saveLink.onclick = callFunc.bind(saveLink, newId);

Example: https://jsfiddle.net/mqyyf0xu/

Edit : with the new information that you want to increment a count when the user clicks the link, I think you should modify your approach to something like this:

HTML:

<a href="#" class="like" data-likes="0">Likes <span class="like-count">0</span></a>

Javascript:

var likeButton = document.querySelector('.like');

likeButton.onclick = function() {
   var likeCountDisplay = this.querySelector('.like-count');
   var likeCount = parseInt(this.getAttribute('data-likes'), 10) + 1;
   this.setAttribute('data-likes', likeCount);
   likeCountDisplay.textContent = likeCount;
}

Here is an updated fiddle: https://jsfiddle.net/mqyyf0xu/2/