Ajax提交表单，js绑定事件无效

我需要用ajax表单提交，用js绑定一个按钮并且ID都是正确的，但是点击按钮却没效果。之前我是在按钮上用的ID选择的，之前也碰到过类似的，我以为不能用ID于是就用了onclick

<button type="button" class="btn btn-primary btn-lg" id="yuyue_finish_btn">完成登记</button>

然后就改成了这样的

<button type="button" class="btn btn-primary btn-lg" onclick="yuyue_finish_btn()">完成登记</button>

然而都没什么用。后来找资料发现是绑定事件在文档没有加载完成时是无法绑定的，因为不能获取到HTML元素，所以需要用   $(document).on(e,selector,function()) 来绑定事件。我将之前的js代码改了一下

这是之前的：

$("#yuyue_finish_btn").click(function(){
    

$.ajax({
        type: "post",
        url:"/preregistration/add",
        data:$('#add_yuyue').serialize(),
        error: function(request) {
            alert("登记失败");
        },
        success: function(data) {
        	window.location.reload();
        	alert("完成登记")
        }
		
	})

});

这是更改之后的

$(document).on('click','#yuyue_finish_btn',function() {
	$.ajax({
        type: "post",
        url:"/preregistration/add",
        data:$('#add_yuyue').serialize(),
        error: function(request) {
            alert("登记失败");
        },
        success: function(data) {
        	window.location.reload();
        	alert("完成登记")
        }
		
	})
});