AJAX 动态加载 HTML 实现购物车

今天在学习策略模式的时候，有一个打折的方案，为了更加深入学习策略模式，我们设计一个简单的商城，当然需要购物车的。

购物车的页面

页面是找到的模板，模板的信息是静态的不能够满足我们的需求。

动态加载

1. 使用的是 ajax 请求 json 串的方式。
   
   这里使用了 JQuery 的一个 after() 新增元素的方法：举例说明作用
   更多关于 after() 的方法：JQuery 添加元素
2. 紧接着，我对返回的数据进行了加工。
   
3. 特别简单的就把购物车的样式加载出来了。
   
   出现了问题，点击事件基本上都不能够使用了。

解决问题

1. 出现问题的原因是什么 ？

• ajax动态加载之前js就加载完了，事件没有绑定到动态生成的DOM元素上。$(’#btn’).click(function(){}) 绑定方法也是无效的。

2. 针对事件的解决办法。

• 使用on绑定事件。on() 方法在被选元素及子元素上添加一个或多个事件处理程序。使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。
  如需移除事件处理程序，请使用 off() 方法。如需添加只运行一次的事件然后移除，请使用 one() 方法。
  
• 很容易看出来，我这里的内容是注释掉的，因为需要绑定的方法实在是太多了，怎么能够在一个页面上边浪费这么多时间呢。

结合原因，另寻出路。

上述问题出现的原因是 AJAX 在异步请求数据的时候，调用的 JavaScript 代码已经加载完成了，再接收到请求的数据后，在进行 DOM 树重新构建，事件没有添加到新的 DOM 树上边。造成页面点击没有效果。

• 有关页面加载顺序的请看：页面加载顺序

1. ajax 是async:true ，默认是异步加载数据的。也就是说在页面还没有重构之前，执行点击事件的方法都已经加载完成了。那么，异步请求呢。
   
   
2. 无论是异步请求，还是同步请求。缺少的就是点击事件执行的方法。我们将方法提取出来存放到一个 JavaScript 文件中。加入到重构的页面中，在重新构建 DOM 树的时候，JavaScript 会再次执行，为页面添加方法。