jQuery script is not working after included

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 ?

Don't load JS code using `load()`. Instead include the handlers in the page when it loads and use delegated event handlers. See [this question](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) for more information — Rory McCrossan, Aug 22 '17 at 13:40
Yes - `$.getScript()` but even then it's not a good idea. Include the logic on load and just amend the DOM as needed. — Rory McCrossan, Aug 22 '17 at 13:45
I added an answer for you which hopefully makes it clearer what I mean. — Rory McCrossan, Aug 22 '17 at 13:52

score 0 · Answer 1 · answered Aug 22 '17 at 13:51

0

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>

answered Aug 22 '17 at 13:51

Rory McCrossan

331,213
40
305
339

OK lets say, the user don't want to register, he is just staying like a guest ,,, Am I need to transfer no necessary data ?? My idea is saving bandwith... Already I said: Yes its working when i am loading the script on page load, doesn't metter before body tag or not... The question is different here :) – halid96 Aug 22 '17 at 14:04
This method costs you about 30 bytes overall in bandwidth, but saves you from making an extra HTTP request to your server. If you're getting down to that level of optimisation then you shouldn't be using jQuery at all. – Rory McCrossan Aug 22 '17 at 14:06
So keeping HTTP Requests ss little as possible is more important ? This will be 300kb data transfer on page load... :) – halid96 Aug 22 '17 at 14:13

jQuery script is not working after included

1 Answers1