ajax点击事件调用自己,jQuery click事件在ajax调用之后再执行一次函数

$(document).on('click', '#slider_icons_wrapper.play', function(event) {

var slider_icons_wrapper = $('#slider_icons_wrapper');

slider_icons_wrapper.attr('class', 'pause');

autoSlider(cur_img_div_pos);

showButton('play_icon');

console.log('play');

});

$(document).on('click', '#slider_icons_wrapper.pause', function(event) {

var slider_icons_wrapper = $('#slider_icons_wrapper');

slider_icons_wrapper.attr('class', 'play');

clearInterval(inter);

showButton('pause_icon');

console.log('pause');

});

此代码第一次加载文档时工作正常。

当用户导航到另一个页面时，通过ajax调用(文档不刷新)，并返回到包含#slider_icons_wrapper div的页面，当用户单击此div时，该函数执行两次。如果用户再次导航并返回，则该功能执行3次，依此类推！

我做错了什么？

修改＃1

当用户导航到另一个页面时，元素#slider_icons_wrapper将从DOM中删除。当它通过ajax调用注入时，click事件每次都会触发更多时间。我试图在用户离开此页面时取消绑定click事件，但同样的事情发生了