为何jQuery中Ajax外调用modal无效，放入success则正常？

嘿，这个问题本质上是异步操作的执行顺序导致的，我给你拆解清楚：

第一种写法的问题所在 #

第一种写法里，你在发起AJAX请求后，立刻就调用了$('#exampleModal').modal();——但AJAX请求是异步的啊！这意味着代码不会等AJAX请求完成，会直接往下执行。

当你第18次点击时：

1. 触发AJAX请求去拉取modal.html
2. 紧接着代码尝试调用$('#exampleModal').modal()，但此时AJAX还没完成，modal.html的内容还没被append到body里，DOM中根本不存在#exampleModal这个元素
3. 这次调用完全无效，模态框自然弹不出来
4. 等到第19次点击时，前一次的AJAX请求已经完成，#exampleModal已经存在于DOM中，这时候调用modal方法就生效了

第二种写法为什么能正常工作 #

第二种写法把$('#exampleModal').modal();放到了AJAX的success回调函数里——这个回调函数只有在AJAX请求成功完成、modal的HTML已经被append到body之后才会执行。

当你第18次点击时：

1. AJAX请求完成，modal.html的内容被成功添加到body
2. 紧接着在success里调用$('#exampleModal').modal()，此时DOM里已经有这个元素了，所以模态框能正常弹出

另外提个小建议：这种写法要注意避免重复append模态框（比如多次触发checkPoints()的话，会往body里加多个modal），可以在append前先判断#exampleModal是否存在，或者把模态框的HTML提前加载好，不用每次都发起AJAX请求~

内容的提问来源于stack exchange，提问作者B. Ma