跳到主要内容
  1. Posts/

jQuery 踩坑记

·

开发项目时踩到的坑。

包含 jQuery 库 #

可以下载到项目目录里通过相对路径调用,不过我更偏向于通过 cdn 来包含这些开源库:

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

新增元素 click 事件 #

对于通过 js 新增加到 html 中的元素,jQuery 原来的 选择器. click() 会失效。 解决方法是采用 .on() 方法绑定到 body。例如:

$(document).on('click', '.exp', function() {...});

就相当于原来的 $('.exp').click(function() {...});

ajax 发送表单数据 #

发送表单数据(FormData)时,需要将 processDatacontentType 设置为 false,否则无法正确传输。

$.ajax({
    method: 'POST',
    url: url,
    dataType: 'JSON',
    data: fData,
    cache: false,
    processData: false,
    contentType: false,
    ...
});

ajax 异步修改变量值 #

由于 ajax 发送异步请求(相当于并行请求),在 ajax 的 success 方法里想要修改变量的值是比较困难的。如果想要修改变量值,一般都会设置 async: false 来强制发送同步请求,但这样也就让 ajax 失去了意义。

退而求其次的办法是,在 ajax 里只修改全局变量,并且推迟使用被修改变量的值。

通过循环绑定 click 事件 #

这里会遇到的问题是,所有的 click 事件都被绑定到了最后绑定的那个函数上。原因是 js 中的函数都是在调用时才被解析的。通过查阅 资料,得到的解决方法之一是采用 .each() 方法:

$('img').each(function (index) {
    $(this).click(function () {
        //...
    });
}

这里的参数 index 表示符合选择器规则的元素的索引。例如本例中,在对应 html 中的第 3 个 <img> 标签,其 index 值就为 2。要引用索引为 index 的元素,在这里只需要 $('img').eq(index) 即可。