老师有问题
来源：1-7 详情页-右侧数据渲染（4）
粉墨登场
2021-03-22 21:55:23
问题描述：
老师你好，给加号绑定点击事件，但是不起作用，调试时测试了一下alert，但是alert都没有弹出来，说明事件压根没绑上，排查了好几遍但是不知道问题在哪里，函数也执行了，也没有单词拼错，请老师帮忙看一下。
相关代码：
HTML结构内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>深圳麦当劳前海二餐厅</title>
<!-- 添加页面小图标的link标签 -->
<link rel="icon" href="https://www.imooc.com/static/img/common/touch-icon-ipad.png">
<script>
(function () {
var htmlTag = document.documentElement,
rem = htmlTag.clientWidth / 10;
setRemUnit();
function setRemUnit () {
htmlTag.style.fontSize = rem + 'px';
};
window.addEventListener('scroll', setRemUnit);
window.addEventListener('pageshow', function (ev) {
if(ev.persisted) {
setRemUnit();
};
});
})();
</script>
<!-- 引入重置页面默认样式的CSS文件 -->
<link rel="stylesheet" href="../css/reset.css">
<!-- 引入页面头部组件的CSS样式文件 -->
<link rel="stylesheet" href="../common/navHeader/navHeader.css">
<!-- 引入点餐页面中的headerTab组件的CSS样式文件 -->
<link rel="stylesheet" href="../common/headerTab/headerTab.css">
<!-- 引入左侧类目的CSS样式文件 -->
<link rel="stylesheet" href="left/left.css">
<!-- 引入右侧餐品详情的CSS样式文件 -->
<link rel="stylesheet" href="right/right.css">
</head>
<body>
<!-- 头部的内容结构开始 -->
<div class="nav">
<div class="back-icon"></div>
<h4 class="nav-title">深圳麦当劳前海二餐厅</h4>
</div>
<!-- 头部的内容结构结束 -->
<!-- 点餐页面的分页内容结构开始 -->
<div class="tab-bar">
</div>
<!-- 点餐页面的分页内容结构结束 -->
<!-- *** 点餐页面具体的商品及分类的内容结构开始 -->
<div class="menu-inner">
<!-- 左侧商品分类的外层父容器 -->
<div class="left-bar">
<div class="left-bar-inner"></div>
</div>
<!-- 右侧具体商品显示的外层父容器 -->
<div class="right-content">
<!-- 具体商品分类的标签 -->
<p class="right-title"></p>
<!-- 显示具体商品信息、价格的外层容器 -->
<div class="right-list">
<div class="right-list-inner"></div>
</div>
</div>
</div>
<!-- *** 点餐页面具体的商品及分类的内容结构结束 -->
<!-- 引入jQuery函数库的JS文件 -->
<script src="../js/jquery.js"></script>
<!-- 引入点餐页面中的headerTab组件的JS代码文件 -->
<script src="../common/headerTab/headerTab.js"></script>
<!-- 引入左侧类目的JS代码文件 -->
<script src="left/left.js"></script>
<!-- 引入右侧餐品详情的JS代码文件 -->
<script src="right/right.js"></script>
</body>
</html>
相关代码：
right.js文件
;
(function () {
// 右侧具体商品描述的字符串模板
// 每个餐品详情的外层容器
var temp = '<div class="menu-item">' +
// 餐品左侧的图片
'<img class="menu-img" src="$picture">' +
// 餐品右侧详细信息的外层容器
'<div class="menu-item-right">' +
// 餐品的名称
'<p class="item-title">$title</p>' +
// 餐品组成的信息介绍
'<p class="item-desc">$description</p>' +
// 该餐品的点赞总数
'<p class="item-zan">$praise_content</p>' +
// 餐品单价的外层容器
'<p class="item-price">' +
// 餐品的单价
'￥$min_price' +
// 餐品价格的量词 => （/份）
'<span class="unit">/$unit</span>' +
'</p>' +
'</div>' +
// 选取餐品数量的外层容器
'<div class="select-content">' +
// 减号符号
'<div class="minus"></div>' +
// 选择了几份餐品
'<div class="count">$choose_count</div>' +
// 加号符号
'<div class="plus"></div>' +
'</div>' +
'</div>',
str = '';
// 渲染右侧餐品列表的函数
function initRightList (data) {
// 每次点击左侧的餐品分类时，先将右侧的详细商品的HTML内容全部清除掉，不然动态渲染的数据会越来越多
$('.right-list-inner').html('');
// 循环传入的参数
data.forEach(function (item) {
if(!item.chooseCount) {
item.chooseCount = 0
};
// 将字符串模板中的占位符替换成请求到的数据内容
str = temp.replace('$picture', item.picture)
.replace('$title', item.name)
.replace('$description', item.description)
.replace('$praise_content', item.praise_content)
.replace('$min_price', item.min_price)
.replace('$choose_count', item.chooseCount)
.replace('$unit', item.unit);
// 将替换完成真实数据后的完整的HTML结构添加上一个自定义的属性 menuData，该属性的属性值就是每一组请求到的数组数据
var haveData = $(str).data('menuData', item);
// 最后成为right-list-inner容器的HTML内容结构
$('.right-list-inner').append(haveData);
});
};
// 渲染右侧餐品各个不同分类标题的函数
function initRightTitle (str) {
$('.right-title').text(str);
};
function addClick () {
$('.select-content').on('click', '.plus', function () {
// alert(1);
// var $count = $(this).parent().find('.count');
// $count.text(parseInt($count.text()) + 1);
// var changeData = $(this).parents('.menu-item').first().data('menuData');
// changeData.chooseCount = changeData.chooseCount + 1;
});
};
addClick();
// 统一调用各个函数的总函数，也是全局对象window下的一个对象right中的refresh方法
function init (data) {
// 调用initRightTitle函数，将传过来的参数当作实参传入
initRightTitle(data.name);
// 调用initRightList函数，将传过来的参数当作实参传入
initRightList(data.spus);
};
// window对象上添加一个对象，该对象是暴露给外面的接口对象，其中的refresh函数是init函数，每次调用refresh函数时就是调用init函数
window.right = {
refresh: init
};
})();
相关代码：
left.js文件
;
(function () {
// 左侧类目的字符串模板
var temp = '<div class="left-item">' +
'<div class="left-item-text">$getItemContent</div>' +
'</div>',
str = '';
// 请求数据的函数
function getList () {
$.get('../../../美团外卖的JSON数据/food.json', function (data) {
console.log(data);
// 调用initContentList方法，将请求到的数据当作参数传入
initContentList(data.data.food_spu_tags);
});
};
// 渲染左侧item内容的函数
function getItemContent (data) {
// 如果数组中有icon属性，说明是有icon图标的，返回的HTML结构跟没有icon图标的HTML结构不同
if(data.icon) {
return '<img class="item-icon" src=' + data.icon + '>' + data.name;
} else {
return data.name;
};
};
// 渲染左侧类目完整HTML结构及添加自定义属性itemData的函数
function initContentList (list) {
list.forEach(function (item) {
// 将data赋值为替换成数据的完整HTML结构
str = temp.replace('$getItemContent', getItemContent(item));
// 将替换完成的HTML结构转换成jQuery对象，并且添加一个自定义的属性itemData，将循环到的数组对象当作属性值
var haveAttr = $(str).data('itemData', item);
// 最后将完整的HTML结构成为外层容器的HTML内容
$('.left-bar-inner').append(haveAttr);
});
};
function init () {
getList();
addClick();
};
init();
// 给左侧的每一个分类类目绑定点击事件的函数
function addClick () {
// 左侧每一个类目绑定点击事件，使用事件代理的方式
$('.left-bar-inner').on('click', '.left-item', function () {
// 获取当前被点击的左侧分类类目的HTML标签上的自定义属性itemData的属性值
var $target = $(this).data('itemData');
// 左侧所有类目全部去除class类名 active
$('.left-item').removeClass('active');
// 当前被点击的类目添加上class类名 active，激活样式
$(this).addClass('active');
// 调用添加在全局对象window下的right对象中的refresh方法，将当前被点击的左侧类目的自定义属性itemData的属性值当作参数传入，以此更新右侧详细餐品的显示数据内容，左右一起对应联动。
window.right.refresh($target);
});
};
})();
写回答
2回答
-
好帮手慕言
2021-03-23
同学自己找到问题并解决，很棒！！！继续加油，祝学习愉快~
0 -
粉墨登场
提问者
2021-03-22
老师，找到问题了，函数调用的位置不对，因为初始页面中，右侧的餐品详细内容是没有的，所以绑定事件时压根找不到DOM，所以没有绑定上，应该将函数调用的位置放在init()函数中，这样每次生成了DOM之后，事件才能绑定上.......
0
相似问题