I am having trouble with an HTML file (inc_1.html) I'm loading into my main template (index.html) using jQuery .load(). My getTotal function doesn't execute the JS in Example #2 but it does execute in Example #1. I was wondering if anyone could see what the problem is and whether callback functions (https://api.jquery.com/load/) or Cross Origin or DOM issues are the issue and suggest a solution? Thanks and much appreciated!
Example 1 This method with all code on same page does work (not using jQuery .load() ) Demo at https://jsfiddle.net/hcanning2012/ftd8wspn/5/
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function() {
function getTotal() {
var total = 0;
$("input, select").each(function(i, el) {
if ($(el).is("input:checked")) {
$($(el).data("rel")).show();
total += parseInt($(el).val());
} else {
$($(el).data("rel")).hide();
}
if ($(el).is("select")) {
if ($(el).val() !== "0") {
$($(el).data("rel")).html($(el).val()).show();
total += parseInt($(el).val());
}
}
});
return total;
}
$('input[type="checkbox"], select').change(function() {
$("#sum").text(getTotal());
});
});
</script>
</head>
<body>
<table width="100%">
<tr>
<td>
<label>
<input type="checkbox" name="colorCheckbox" id="n1" value="200" data-rel="div.n1"> Show Price
</label>
</td>
<td>
<div class="n1 box">200</div>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="colorCheckbox" id="n2" value="200" data-rel="div.n2"> Show Price
</label>
</td>
<td>
<div class="n2 box">200</div>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="colorCheckbox" id="n3" value="200" data-rel="div.n3"> Show Price
</label>
</td>
<td>
<div class="n3 box">200</div>
</td>
</tr>
<tr>
<td>
<label>
<select id="n4" data-rel="div.n4">
<option value="0" selected>Choose...</option>
<option value="10">item 1</option>
<option value="20">item 2</option>
</select>
</label>
</td>
<td>
<div class="n4"></div>
</td>
</tr>
<tr>
<td>
<label>
<select id="n5" data-rel="div.n5">
<option value="0" selected>Choose...</option>
<option value="3">item 1</option>
<option value="4">item 2</option>
</select>
</label>
</td>
<td>
<div class="n5"></div>
</td>
</tr>
<tr>
<td> Total: </td>
<td>
<div id="sum">0</div>
</td>
</tr>
</table>
</body>
</html>
Example 2
This does NOT work using jQuery .load() . inc_1.html loads in <div id="targetPane"></div> when selected in dropdown
<<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.load Test</title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/grid/">
<link href="https://getbootstrap.com/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//open calc js
$(function() {
function getTotal() {
var total = 0;
$("input, select").each(function(i, el) {
if ($(el).is("input:checked")) {
$($(el).data("rel")).show();
total += parseInt($(el).val());
} else {
$($(el).data("rel")).hide();
}
if ($(el).is("select")) {
if ($(el).val() !== "0") {
$($(el).data("rel")).html($(el).val()).show();
total += parseInt($(el).val());
}
}
});
return total;
}
$('input[type="checkbox"], select').change(function() {
$("#sum").text(getTotal());
});
});
//end calc js
//open dropdown js
jQuery($ => {
$('#courses').on('change', e => {
$('#targetPane').load(e.target.value);
});
}); //close dropdown js
</script>
<link href="https://getbootstrap.com/docs/5.0/examples/grid/grid.css" rel="stylesheet">
</head>
<body class="py-4">
<main>
<div class="container">
<div class="row mb-3">
<select name="myCourses" id="courses" autocomplete="off">
<option value="" selected>Select</option>
<option value="includes/inc_1.html">Load inc_1.html</option>
<!-- assume more dropdown options -->
</select>
<!-- load include file here -->
<div id="targetPane"></div>
</div> <!--close row-->
</div> <!-- close container -->
</main>
</body>
</html>
Content of included file inc_1.html
<table width="100%">
<tr>
<td>
<label>
<input type="checkbox" name="colorCheckbox" id="n1" value="200" data-rel="div.n1"> Show Price1
</label>
</td>
<td>
<div class="n1 box">200</div>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="colorCheckbox" id="n2" value="200" data-rel="div.n2"> Show Price
</label>
</td>
<td>
<div class="n2 box">200</div>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="colorCheckbox" id="n3" value="200" data-rel="div.n3"> Show Price
</label>
</td>
<td>
<div class="n3 box">200</div>
</td>
</tr>
<tr>
<td>
<label>
<select id="n4" data-rel="div.n4">
<option value="0" selected>Choose...</option>
<option value="10">item 1</option>
<option value="20">item 2</option>
</select>
</label>
</td>
<td>
<div class="n4"></div>
</td>
</tr>
<tr>
<td>
<label>
<select id="n5" data-rel="div.n5">
<option value="0" selected>Choose...</option>
<option value="3">item 1</option>
<option value="4">item 2</option>
</select>
</label>
</td>
<td>
<div class="n5"></div>
</td>
</tr>
<tr>
<td> Total: </td>
<td>
<div id='sum'>0</div>
</td>
</tr>
</table>
Maybe the solution could be achieved using a callback function like:
jQuery($ => {
$('#courses').on('change', e => {
$('#targetPane').load(e.target.value);
path = (e.target.value);
//open callback function
$('#targetPane').load('path', function(){
//add solution here
}); //close callback function
});
}); //close jQuery
` doesn't change the behavior of the script that adds the elements. Use event delegation -> the accepted answer.
– Andreas Aug 13 '21 at 12:34Go to the pub instead!"
` – Aug 13 '21 at 13:16