jquery append添加的html无法触发js
0
悬赏园豆：10
[待解决问题]
起初是想使用getscript刷新js代码的，但是发现没什么用，后面想使用on，但是不知道怎么改，可以指点一下我吗
html代码
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="css/shop.css">
<link rel="stylesheet" href="fonts/font-awesome.min.css">
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/shop1.js"></script>
<!-- 商品列表区域 start-->
<div class="par_list">
<ul>
<li>
<img name='imag' src="images/口罩.jpg" width="220" height="220" alt="口罩" />
<p class="title">医用外科口罩定制印logo印花字彩图...</p>
<p class="jg"><font>￥0.60</font><span name="addshop">加入购物车</span></p>
</li>
<li>
<img name='imag' src="images/海报.jpg" width="220" height="220" alt="海报" />
<p class="title">宣传知识冠状病毒挂图防控海报6S管...</p>
<p class="jg"><font>￥9.99</font><span name="addshop">加入购物车</span></p>
</li>
<li>
<img name='imag' src="images/防疫套装.jpg" width="220" height="220" alt="防疫套装" />
<p class="title">包邮疫情防疫礼包企业单位学校学生...</p>
<p class="jg"><font>￥389.0</font><span name="addshop">加入购物车</span></p>
</li>
<li>
<img name='imag' src="images/口罩2.jpg" width="220" height="220" alt="口罩" />
<p class="title">防护面罩成人儿童隔离面屏透明防雾...</p>
<p class="jg"><font>￥9.98</font><span name="addshop">加入购物车</span></p>
</li>
</ul>
<ul>
<li>
<img name='imag' src="images/防护服.jpg" width="220" height="220" alt="防护服" />
<p class="title">一次性防护服隔离衣连体全身带帽防...</p>
<p class="jg"><font>￥12.50</font><span name="addshop">加入购物车</span></p>
</li>
<li>
<img name='imag' src="images/口罩3.jpg " width="220" height="220" alt="口罩" />
<p class="title">2022新款虎年新年口罩印花透气一次...</p>
<p class="jg"><font>￥1.39</font><span name="addshop">加入购物车</span></p>
</li>
<li>
<img name='imag'src="images/口罩4.jpg" width="220" height="220" alt="口罩" />
<p class="title">中国风口罩新年国潮n95一次性3D立...</p>
<p class="jg"><font>￥0.70</font><span name="addshop">加入购物车</span></p>
</li>
<li>
<img name='imag' src="images/健康码.jpg" width="220" height="220" alt="健康码" />
<p class="title">扫码登记防疫宣传海报二维码台牌定...</p>
<p class="jg"><font>￥9.90</font><span name="addshop">加入购物车</span></p>
</li>
</ul>
</div>
<!--商品列表区域 end-->
<!--商品购物车 start-->
<form name="form1">
<div class="form2">
<table class="tab">
<tr>
<th class="th2"><input type="checkbox" name="che" id="inpf" value="全选"/>全选</th>
<th class="th3">商品图片</th>
<th class="th4">商品信息</th>
<th class="th5">单价</th>
<th class="th5">数量</th>
<th class="th5">小计</th>
<th>操作</th>
</tr>
</table>
<table class="tabb">
<tr>
<td class="td"><input type="checkbox" name="che0" id="inpf1"/></td>
<td class="td1"><img src="images/口罩.jpg"/></td>
<td class="td2"><p><b>商品信息</b>教学质量真正做到尽心尽责，学员没有通过项目与考试一律不允许毕业，直到专门 </p></td>
<td class="td3"><a href="javascript:void(0)" class="spn" name = "price">2.60</a></td>
<td class="td3">
<div class="smb">
<a href="javascript:void(0)" class="smbb" name = "min">-</a>
<a href="javascript:void(0)" class="smbc" name = "nam">1</a>
<a href="javascript:void(0)" class="smbb" name = "add">+</a>
</div>
</td>
<td class="td3"><a href="javascript:void(0)" class="spy" name = "total">2.60</a></td>
<td><span class="spw">加入收藏<br><a href="javascript:void(0)" name="delete">删除</a></span></td>
</tr>
</table>
<table class="tabb">
<tr>
<td class="td"><input type="checkbox" name="che0" id="inpf1"/></td>
<td class="td1"><img src="images/口罩2.jpg"/></td>
<td class="td2"><p><b>商品信息</b>教学质量真正做到尽心尽责，学员没有通过项目与考试一律不允许毕业，直到专门 </p></td>
<td class="td3"><a href="javascript:void(0)" class="spn" name = "price">2.60</a></td>
<td class="td3">
<div class="smb">
<a href="javascript:void(0)" class="smbb" name = "min">-</a>
<a href="javascript:void(0)" class="smbc" name = "nam">2</a>
<a href="javascript:void(0)" class="smbb" name = "add">+</a>
</div>
</td>
<td class="td3"><a href="javascript:void(0)" class="spy" name = "total">5.20</a></td>
<td><span class="spw">加入收藏<br><a href="javascript:void(0)" name="delete">删除</a></span></td>
</tr>
</table>
<table class="tabb">
<tr>
<td class="td"><input type="checkbox" name="che0" id="inpf1"/></td>
<td class="td1"><img src="images/口罩3.jpg"/></td>
<td class="td2"><p><b>商品信息</b>教学质量真正做到尽心尽责，学员没有通过项目与考试一律不允许毕业，直到专门 </p></td>
<td class="td3"><a href="javascript:void(0)" class="spn" name = "price">2.60</a></td>
<td class="td3">
<div class="smb">
<a href="javascript:void(0)" class="smbb" name = "min">-</a>
<a href="javascript:void(0)" class="smbc" name = "nam">3</a>
<a href="javascript:void(0)" class="smbb" name = "add">+</a>
</div>
</td>
<td class="td3"><a href="javascript:void(0)" class="spy" name = "total">7.80</a></td>
<td><span class="spw">加入收藏<br><a href="javascript:void(0)" name="delete">删除</a></span></td>
</tr>
</table>
</div>
<table class="tabf">
<tr>
<th class="tdf">
<input type="checkbox" id="inpff" name="che" value="全选"/>
<span class="spf">全选</span>
<div class="foot">
<a href="javascript:void(0)" id="del">删除</a>
<span>共商品数：<b id="sum">3</b>件</span>
</div>
</th>
<td>
<div class="footrl"><lable>合计(不含运费)：</lable><span id="foott"><strong>¥</strong>0.00</span>
</div>
</td>
</tr>
<input type="submit" value="结算" id="footrr">
</table>
</form>
</body>
</html>
css代码
*{
font-size:12px;
color:#666666;
border:0;
padding:0;
margin:0;
}
form{
/* height: 1500px; */
}
a{
text-decoration:none;
}
table{
background-color:#e2f2ff;
margin:10px;
border-radius:4px;
}
.tab{
width:800px;
height:34px;
border-top:4px solid #a7cbff;
border-spacing:0;
}
.tabb{
width:802px;
height:103px;
border:1px solid #cadeff;
border-spacing:0;
}
.tabf{
width:690px;
height:50px;
border:1px solid #c8c8c8;
background-color:#fff;
border-spacing:0;
border-radius:0;
position:relative;
z-index:1;
}
.th2{
width:60px;
border-right:1px solid #FFF;
}
.th3{
width:100px;
border-right:1px solid #FFF;
}
.th4{
width:194px;
border-right:1px solid #FFF;
}
.th5{
width:110px;
border-right:1px solid #FFF;
}
.td{
width:59px;
border-right:1px solid #e2f2ff;
}
.td1{
width:100px;
border-right:1px solid #e2f2ff;
}
.td2{
width:179px;
padding:0px 8px 0px 7px;
border-right:1px solid #e2f2ff;
text-align:justify;
}
.td3{
width:110px;
border-right:1px solid #e2f2ff;
}
.tdf{
width:396px;
border-right:1px solid #c8c8c8;
}
#inpf{
float:left;
margin-left:9px;
}
#inpf1{
float:right;
margin-right:12px;
}
#inpff{
float:left;
margin:1px 0px 0px 9px;
}
b{
display:block;
line-height:14px;
margin-top:4px;
}
td{
line-height:20px;
}
img{
border:1px solid #cccccc;
margin:7px 0px 0px 8px;
}
.spn{
float:left;
margin:0 0 62px 34px;
color:#000;
font-weight:bold;
font-size:14px;
display:block;
}
.spy{
float:left;
margin:0 0 64px 42px;
color:#ff5500;
font-weight:bold;
font-size:14px;
display:block;
font-family:Tahoma, Geneva, sans-serif;
}
.spw{
float:left;
margin:0 0 50px 32px;
color:#585858;
font-size:12px;
text-align:center;
display:block;
line-height:15px;
}
.spf{
float:left;
margin-left:6px;
}
.smb{
width:75px;
height:24px;
background-color:#f0f0f0;
float:left;
margin:0 0 58px 21px;
line-height:22px;
}
.smbb{
display:block;
width:18px;
height:22px;
border:1px solid #ff6600;
text-align:center;
float:left;
}
.smbc{
display:block;
width:35px;
height:22px;
background-color:#ffffff;
border-bottom:1px solid #aaaaaa;
border-top:1px solid #aaaaaa;
text-align:center;
float:left;
}
.foot{
width:262px;
float:left;
margin-left:70px;
font-weight:normal;
}
.foot a{
float:left;
text-decoration:none;
color:#551a8b;
}
.foot span{
float:right;
}
.foot>span>b{
font-size:14px;
color:#ff0000;
display:inline;
}
.footrl{
float:left;
margin-left:20px;
}
.footrl>lable{
float:left;
margin-top:3px;
font-family:Arial;
}
.footrl>span{
font-family:Tahoma, Geneva, sans-serif;
font-size:24px;
color:#ff5500;
font-weight:bold;
}
.footrl>span>strong{
font-family:Arial;
font-size:24px;
color:#cccccc;
font-weight:normal;
margin:0px 4px 0px 8px;
}
#footrr{
width:118px;
height:50px;
background-color:#ff5500;
font-size:17px;
line-height:52px;
letter-spacing:4px;
color:#ffffff;
font-weight:bold;
border-radius:2px;
position:absolute;
left:692px;
z-index:2;
}
.tabb img{
width: 80px;
height: 80px;
}
*{margin:0;padding:0;}
.banner{width:100%;height:160px;background:url("images/banner.jpg") center top;}
.par_list{width:990px;height:310px;margin:40px auto;}
.par_list ul li{width:220px;height:300px;border:1px solid #ddd;list-style-type:none;
float:left;margin:0 7px;padding:5px;
}
.par_list ul li p.title{color:#666;font-size:12px;line-height:40px;}
.par_list ul li p.jg{color:red;}
.par_list ul li p.jg span{float:right;width:80px;height:30px;background:red;color:#fff;
line-height:30px;font-size:12px;text-align:center;
border-radius:5px;
cursor: pointer;
}
/* .carbox{width:260px;height:100%;background:green;position:fixed;
top:0;right:-220px;
}
.carbox .left{width:40px;height:100%;background:#000;position:relative;
float:left;
}
.carbox .left span{color:#fff;font-size:12px;width:12px;display:block;background:red;
padding:10px 14px;position:absolute;top:50%;left:0;margin-top:-42px;
}
.carbox .con{width:220px;height:100%;background:#ddd;float:left;}
.carbox .con dl{width:200px;height:60px;border-bottom:1px solid #fff;padding:10px;}
.carbox .con dl dt{width:60px;height:60px;float:left;}
.carbox .con dl dd{width:120px;float:right;font-size:12px;line-height:20px;margin-right:10px;} */
js代码
window.onload = function(){
var addA = document.getElementsByName("addshop");
var sum = document.getElementById("sum");
var price = document.getElementsByName("price");//单价
var nam = document.getElementsByName("nam"); //数量
var minn = document.getElementsByName("min");
var add = document.getElementsByName("add");
var total = document.getElementsByName("total");//小计
var foott = document.getElementById("foott");
var deleteA = document.getElementsByName("delete");
var del = document.getElementById("del");
var table = document.getElementsByTagName("table");
for(p = 0;p < addA.length;p++){
addA[p].onclick = function(){
$(".form2").append( <table class="tabb"> <tr> <td class="td"><input type="checkbox" name="che0" id="inpf1"/></td> <td class="td1"><img src="images/口罩2.jpg"/></td> <td class="td2"><p><b>商品信息</b>教学质量真正做到尽心尽责，学员没有通过项目与考试一律不允许毕业，直到专门 </p></td> <td class="td3"><a href="javascript:void(0)" class="spn" name = "price">2.60</a></td> <td class="td3"> <div class="smb"> <a href="javascript:void(0)" class="smbb" name = "min">-</a> <a href="javascript:void(0)" class="smbc" name = "nam">2</a> <a href="javascript:void(0)" class="smbb" name = "add">+</a> </div> </td> <td class="td3"><a href="javascript:void(0)" class="spy" name = "total">5.20</a></td> <td><span class="spw">加入收藏<br><a href="javascript:void(0)" name="delete">删除</a></span></td> </tr> </table> );
$.getScript("js/shop.js");
}
}
//全选
for(i = 0;i < form1.che.length;i++){ //获取到所有name为che的form
form1.che[i].onclick = function(){
for(var m = 0;m < form1.che0.length;m++){
form1.che0[m].checked = this.checked;
for(p = 0;p <form1.che.length;p++){
if(form1.che[p]!==this)form1.che[p].checked = this.checked;
}
}
tot();
}
}
//单选
for(var m2 = 0;m2 < form1.che0.length;m2++){
form1.che0[m2].onclick = function(){
if(!this.checked){
form1.che[0].checked = this.checked;
form1.che[1].checked = this.checked;
}
else{
for(var m3 = 0;m3 < form1.che0.length;m3++){
if(!form1.che0[m3].checked){
form1.che[0].checked = false;
form1.che[1].checked = false;
break;
}
else {
form1.che[0].checked = this.checked;
form1.che[1].checked = this.checked;
}
}
}
tot();
}
}
//合计函数
function tot(){
var arr = [],sumA = 0;
for(var m = 0;m < form1.che0.length;m++){
if(form1.che0[m].checked){
arr.push(total[m].innerHTML);
sumA += parseInt(nam[m].innerHTML);
}
}
if(arr.length>0){
var str = "<strong>¥</strong>";
var sumB = 0;
for(le = 0;le < arr.length;le++){
sumB += parseFloat(arr[le])
}
foott.innerHTML = str + sumB.toFixed(2);;
sum.innerHTML = sumA;
}
else{
foott.innerHTML = "<strong>¥</strong>0.00";
sum.innerHTML = 0;
}
}
tot()
//选中删除
del.onclick = function(){
for(var i = 0;i < form1.che0.length;i++){
if(form1.che0[i].checked){
table[i+1].style.display = "none";
nam[i].innerHTML = 0;
total[i].innerHTML = (parseFloat(price[i].innerHTML)parseFloat(nam[i].innerHTML)).toFixed(2);
}
tot()
}
}
//单项删除
for(p = 0;p < deleteA.length;p++){
deleteA[p].nam = p;
deleteA[p].onclick = function(){
table[this.nam+1].style.display = "none"; //隐藏
nam[this.nam].innerHTML = 0;
total[this.nam].innerHTML = (parseFloat(price[this.nam].innerHTML)parseFloat(nam[this.nam].innerHTML)).toFixed(2);
tot()
}
}
for(q = 0;q < add.length;q++){
//货物增加
add[q].nam = q;
add[q].onclick = function(){
if(parseInt(nam[this.nam].innerHTML)<3){
nam[this.nam].innerHTML = parseFloat(nam[this.nam].innerHTML) + 1;
total[this.nam].innerHTML = (parseFloat(price[this.nam].innerHTML)*parseFloat(nam[this.nam].innerHTML)).toFixed(2);
tot()
}
}
//货物减少
minn[q].nam = q;
minn[q].onclick = function(){
if(parseInt(nam[this.nam].innerHTML)>0){
nam[this.nam].innerHTML = parseFloat(nam[this.nam].innerHTML) - 1;
total[this.nam].innerHTML = (parseFloat(price[this.nam].innerHTML)*parseFloat(nam[this.nam].innerHTML)).toFixed(2);
tot()
}
}
}
}
所有回答(1)
0
