I'm new to frontend, and I've been working on this app for four days with Flask. I have searched the site and tried all the methods including $(".selector").on() and other stuff, but I could not get the problem solved.

Basically there are three template in my app, the first one will receive input info and create subpage with the second template, and this subpage will accept other info and create sub-subpage with the third template.

The problem is that I can't get the click event fired in the sub-subpage.

In the second template for the subpage, I have the code below using $.ajax post and get to deliver information and use posted information to create the sub-subpage using the third template and its route.

The code in the second template.

window.onload = init;

function init(){
  var button1 = document.getElementById("button");
  button1.onclick = create_sub_subpage;
};

$(document).ready(function(){
  //other statements used $.getJSON to get select list from python Flask
};

// code to send data to Flask
function create_sub_subpage(){
  $.ajax({
    url: "create_sub_subpage",
    type: "post",
    data: ...,
    success: function(result){
      alert("foo")
    }
  })
}

And the Flask code to receive and create_sub_subpage is below:

@app.route('<sub_page>/<page>')
def render_third_page(sub_page, page):
  return render_template("third.html")

@app.route('/create_sub_subpage', methods=['GET', 'POST'])
def create_sub_subpage():
  if request.method == 'POST':
    posted = request.get_json(force = True)
  page = posted['page']
  sub_page = posted['sub_page']
  render_third_page(sub_page, page)
  return jsonify({'msg':'finish'})

The code in third templates which could not be fired is below:

window.onload = init;

function init(){
  ... // no $.ajax 
};

$(document).ready(function(){
  alert("ready"); // not executed
  var a = document.getElementById("test");
  a.onclick(function(){
    alert("clicked");
  });
});

The first template used basically the same logic to create the subpage, but the second template are working fine.

I exchange the second and the third template, and the alert and click are both working fine, so I was wondering if the problem was caused by the structure of the second template? Does is have something to do with $.ajax? why the document.ready is not working in my third template?

Pardon me if I used unprofessional words for I am not professionally trained yet.

Thanks a lot for your advice and solutions!!!