如何使用绑定和取消绑定函数而不是使用jquery在类上单击函数？

Question

在这里，我有一个非常小的模块。其中我有时间轴和幻灯片。

在我的时间表中，一切正常。但是当我去幻灯片时。 它也适用于类名上的单击功能。 但是我想在下一个和上一个按钮点击上使用 bind 和取消绑定功能。  在这里，我的代码请查看它，并将帮助您获得帮助。

var divSlide = document.querySelectorAll('#slide');
	var myNodeList = divSlide.length;
	let slideNo = 1;
	for(var i = 0; i < myNodeList; i++) {
		var type = divSlide[i].getAttribute("type");
		if (type == "timeline") {
		} else if (type == "slideshow") {
			var timeline = divSlide[i];     
			let sliderData = timeline.getElementsByTagName("section");
			$("[type=slideshow] section").addClass('hide');
			$("[type=slideshow]").each( function(i,ele){
				$(ele).children("section:first").removeClass("hide").addClass('active');
			});
			timeline.insertAdjacentHTML("afterbegin",'<a class="left uc_prev color_arrow carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span><span class="sr-only">Previous</span></a>');
			
			timeline.insertAdjacentHTML('afterbegin','<a class="right uc_next color_arrows  carousel-control" href="#myCarousel"  data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">Next</span></a>');
		}
	}

	$(document).on ('click','.uc_prev',function() {
		let select = $(this).parent();
		let totChild = select.children("section");
		for(let i=0;i<totChild.length;i++){
			if(totChild[i].getAttribute('class').indexOf('active')!=-1){
				slideNo=i+1;
			}
		}
		totChild.children('br').remove();
		let current = select.children('.active');
		let prevEl = current.prev('section');
		
		if(slideNo === totChild.length || slideNo > 1){
			select.children(".next").show();
			if(prevEl.length !== 1){
				prevEl = current.prev().prev();
				current.removeClass('active');
				current.addClass('hide');
				prevEl.addClass('active');
				prevEl.addClass('animated');
				prevEl.addClass('fadeInLeft');
				prevEl.removeClass('hide');
			}
		} else {
			select.children(".prev").hide();
		}
	});
	$(document).on ('click','.uc_next',function() {
		let select = $(this).parent();
		let totChild = select.children("section");
		for(let i=0;i<totChild.length;i++){
			if(totChild[i].getAttribute('class').indexOf('active')!=-1){
				slideNo=i+1;
			}
		}
		totChild.children('br').remove();
		let current = select.children('.active');
		let prevEl = current.next('section');
		if(slideNo ===1 || slideNo < totChild.length){	
			select.children(".prev").show();
			if(prevEl.length !== 1){
				prevEl = current.next().next();
				current.removeClass('active');
				current.addClass('hide');
				prevEl.addClass('animated');
				prevEl.addClass('fadeInRight');
				prevEl.addClass('active');
				prevEl.removeClass('hide');
			}
		} else {
			select.children(".next").hide();
		}
	}); 
 }

	
div[type="slideshow"]  {
	height:471px;
	position: relative;
    top: 100px;
}
div[type="slideshow"] > section:not(.hide) {
	margin: auto;
	width: 900px;
	max-height: 265px;
	z-index: 100;
	border-top: 1px solid grey;
	border-left: 4px solid #00BCD4;
	min-height:250px;
	background-color: #b3e5fc2b;
	border-radius: 4px;
	margin-bottom: 55px;
	position: absolute;
	overflow-x: hidden;
	top: 21.4%;
	left: 168px;
	box-shadow: rgb(136, 136, 136) 3px 3px 1px;
}

div[type="slideshow"] > section:not(.hide) > header {
	font-weight: 600;
	color: cadetblue;
	transform: translate(93px, 32px);
	font-size: 34px;
	font-family: arial;
	position: relative;
	word-wrap: break-word;
}

div[type="slideshow"] > section:not(.hide) > article {
	transform: translate(87px,39px);
	max-width: 800px;
	color: black;
	font-size: 22px;
	font-family: arial;
	position: relative;
	padding: 10px;
	word-wrap: break-word;
}

.active{    
	opacity: 1 !important;
}

.hide {
	opacity: 0; 
	min-height: 0 !important; 
	margin: 0 !important;
}
.hide header, .hide article {
	display: none;
}
@keyframes fadein {
	0% { opacity: 0 }
	50% { opacity: 0.5 }
	100% {opacity: 1}
}
br {
	display:none;
}

progress {
	height: 4px;
	top: 46px;
	left: 0px;
	width: 100%;
	position: fixed;
	margin-left: -1px;
	margin-top: -1px;
}
.color_arrow {
	position: relative;
	top: 228px;
	color: #085153;
	left: 93px;
}
.color_arrows {
	position: relative;
	top: 228px;
	color: #085153;
	left: 94% !important;
}
@media only screen and (max-width: 992px) {
	
	div[type="timeline/slideshow"] > section , div[type="timeline"] > section  {
		width: 650px;
	}
	.color_arrow {
		left: -18px;
	}
	div[type="slideshow"] > section:not(.hide) {
		width: 640px;
		left: 14px;
	}
	.color_arrows {
		left: 99% !important;
	}

}
@media only screen and (max-width: 992px) {
	
	div[type="slideshow"] > section  {
		width: 650px;
	}

	div[type="slideshow"] > section:not(.hide) {
		width: 640px;
		left: 18px; 
	}
}

@media only screen and (min-width: 1201px) and (max-width: 1299px) {
	
	div[type="slideshow"] > section:not(.hide)  {
		width: 845px;
		left: 154px;
	}

} 
@media only screen and (min-width: 992px) and (max-width: 1200px) {
	
	div[type="slideshow"] > section:not(.hide) {
		width: 698px;
		left: 136px;
	}

}

<div type="slideshow" id="slide"><br />
<section><header>Title One</header><br />
<article>Content</article>
</section>
<br />
<section><header>Title Two</header><br />
<article>Content</article>
</section>
<br />
<section><header>Title Three</header><br />
<article>Content</article>
</section>
<br />
<section><header>Title Four</header><br />
<article>Content</article>
</section>
</div>