JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="owl-carousel owl-theme">
  <div class="item">
  1
  </div>
   <div class="item">
  2
  </div>
   <div class="item">
  3
  </div>
   <div class="item">
  4
  </div>
   <div class="item">
  5
  </div>
</div>

JavaScript

$('.owl-carousel').owlCarousel({
  loop: false,
  items: 1,
  nav: true,
  navText: ['<div class="owl-prev-btn btn btn-default">prev</div>', '<div class="owl-next-btn btn btn-success">next</div>'],
  mouseDrag: false,
  touchDrag: false,
  onTranslate: callback
});

function callback(event) {
  var items = event.item.count - 1;
  var item = event.item.index;
  if (items == item) {
    alert('last item'); // detect last item
    $('.owl-next').html('<div class="btn btn-success" id="btn-submit">submit</div>');
  } else {
    $('.owl-next').html('<div class="owl-next-btn btn btn-success">next</div>');
  }
}

// problem is here

$(document).on('click', '#btn-submit', function(){
alert('submit clicked');
});