$(document).ready(function() { $.ajax({ type: "get", url: "http://ziguan.webxun.com/api/v2/admin/getreport", headers: { "Access-Token": localStorage.token }, success: function(response) { response.data.list.forEach(element => { $(document).Toasts('create', { title: '提示消息', position: 'bottomRight', body: '您有1条记录', // 通过 data 属性传递标识符 data: { id: element.id } }) }); } }); $(document).on('click', '.toast', function() { // 获取点击的 toast 的标识符 var id = $(this).data('id'); // 根据标识符进行相应的操作 console.log('点击了 toast,标识符为:' + id); }); });我触发的点击事件为什么是点击了 toast,标识符为:undefined
时间: 2024-02-14 20:33:35 浏览: 28
根据你提供的代码,点击事件绑定在了 `.toast` 上,但是在 Toast 中传递的是 `data: {id: element.id}`,因此应该在点击事件中获取 `id`,而不是 `data('id')`。你可以修改代码如下:
```
$(document).on('click', '.toast', function() {
// 获取点击的 toast 的标识符
var id = $(this).data('bs-toast').config.data.id;
// 根据标识符进行相应的操作
console.log('点击了 toast,标识符为:' + id);
});
```
这样就可以正确获取到 `id` 了。
相关问题
$(document).ready(function () { $.ajax({ type: "get", url: "http://ziguan.webxun.com/api/v2/admin/getreport", headers: { "Access-Token": localStorage.token }, success: function (response) { response.data.list.forEach(element => { $(document).Toasts('create', { title: '提示消息', position: 'bottomRight', body: `您有1条记录`, }) }); } }); })给这段代码刷新完成后弹出的框添加点击事件
要给刷新完成后弹出的框添加点击事件,可以按照以下步骤进行操作:
1. 在 `$(document).Toasts` 方法的 `create` 参数中,通过 `data` 属性传递一个唯一的标识符,用于后面绑定点击事件时区分不同的 `toast`。
```javascript
$(document).Toasts('create', {
title: '提示消息',
position: 'bottomRight',
body: '您有1条记录',
// 通过 data 属性传递标识符
data: {
id: 1
}
});
```
2. 在点击事件处理函数中,获取点击的 `toast` 的标识符,并根据标识符进行相应的操作。
```javascript
$(document).on('click', '.toast', function() {
// 获取点击的 toast 的标识符
var id = $(this).data('id');
// 根据标识符进行相应的操作
console.log('点击了 toast,标识符为:' + id);
});
```
完整代码如下:
```javascript
$(document).ready(function() {
$.ajax({
type: "get",
url: "http://ziguan.webxun.com/api/v2/admin/getreport",
headers: {
"Access-Token": localStorage.token
},
success: function(response) {
response.data.list.forEach(element => {
$(document).Toasts('create', {
title: '提示消息',
position: 'bottomRight',
body: '您有1条记录',
// 通过 data 属性传递标识符
data: {
id: element.id
}
})
});
}
});
$(document).on('click', '.toast', function() {
// 获取点击的 toast 的标识符
var id = $(this).data('id');
// 根据标识符进行相应的操作
console.log('点击了 toast,标识符为:' + id);
});
});
```
Access to XMLHttpRequest at 'http://ziguan.webxun.com/api/v2/im/room?name=biyadiceshi' from origin 'http://im.webxun.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
这个错误提示是因为在向http://ziguan.webxun.com发起跨域请求时,服务器没有设置Access-Control-Allow-Origin响应头字段,导致浏览器拒绝了该请求。
要解决这个问题,可以在http://ziguan.webxun.com的服务器端设置响应头中的Access-Control-Allow-Origin字段,将其设置为允许访问的域名。例如:
```
Access-Control-Allow-Origin: http://im.webxun.com
```
另外,如果请求包含了自定义的请求头字段,还需要在响应头中添加Access-Control-Allow-Headers字段,将其设置为允许的请求头字段,例如:
```
Access-Control-Allow-Headers: X-Requested-With,Content-Type
```
这样就可以解决跨域请求的问题了。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![py](https://img-home.csdnimg.cn/images/20210720083646.png)