包含后的jQuery脚本不起作用

Question

Hi there :) I Want to make registration form ....

I already included jQuery...

This is button id of my registration form -> #regfr

This script including: 1 html file; 1 script file succesfully;

<script>
$("#regfr").click(function() {
$("#included").append().load("Model/html/reg_form.html");
$("#included_scripts").append().load("Model/functionJS/reg_form.js")
});
</script>

This is the included script after click #regfr

$( document ).ready(function() {
$('body').on("click", "#regfr",function() {
$("#reganime").fadeIn( "slow" )
});

Note : Here I didn't closed $( document ).ready yet becouse I am using other scripts inside... And the scripts working well when i am including them directly on page load... #reganime is div from reg_from.html Console erros checked = 0

Questions: How to fix this ?

Why included scripts after call are not working ?...

Is the problem is maybe: I am using two functions on click #regfr ?

How to refresh DOM of the page ?

Answer 1

Loading JS code, while possible, is best avoided for a variety of reasons. Not least of all that it adds needless complexity.

Instead you can include the relevant JS code in the page on load and use delegated event handlers to attach logic to elements which are appended to the DOM at some arbitrary point in the future, something like this:

<!-- place this just before </body> -->
<script>
  $("#regfr").click(function() {
    $("#included").append().load("Model/html/reg_form.html");
  });

  $('#included').on('click', "#regfr", function() {
    $("#reganime").fadeIn("slow");
  });
</script>