jquery - 媒体查询中的 jQuery 函数未按预期触发
问题描述
我正在学习 jQuery。我正在使用媒体查询。当我缩小浏览器窗口时,所有代码都按预期响应,除了我的嵌套函数(以 开头$( "tr" ).each(function() {
)。
如果我缩小窗口并刷新页面,嵌套函数会按预期触发。
如何在不刷新页面的情况下触发所有内容?
function myFunction(x) {
if (x.matches) { // If media query matches
$( "tbody tr" ).wrapInner( "<label class='wrapper'></label>" );
$( ".overdueTicket" ).closest( "tr" ).addClass( "overdue" );
$( ".paperclip" ).closest( "tr" ).addClass( "paperclip-icon" );
$( ".paperclip-icon td.osta_ticket" ).append( "<div class='ticket-has-attachement' data-placement='top' data-toggle='tooltip' data-original-title='<?php echo __('Ticket Has Attachment'); ?>'> </div>" );
$( "tr" ).each(function() {
var $this = $(this),
$href = $this.find( ".pull-right "),
$target = $this.find( "td.osta_ticket" );
$href.appendTo($target);
});
} else {
$("tbody tr > .wrapper").contents().unwrap();
$('.overdueTicket').closest('tr').removeClass("overdue");
$('.paperclip').closest('tr').removeClass("paperclip-icon");
}
}
var x = window.matchMedia("(max-width: 760px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes
解决方案
推荐阅读
- node.js - PM2 监听 443 端口显示 EADDRINUSE: address already in use :::443
- flutter - 在上下文之外访问屏幕宽度
- html - 向旋转中心移动 svg
- asynchronous - 异步 AppDomain.AssemblyResolve
- css - 剃刀页面背景图像不显示
- sql-server - 安装 SQL Server 2019 时出错:服务未及时响应启动或控制请求
- nginx - 为什么 example.com 的行为与 .example.com 完全相同?
- wordpress - WordPress。如何将一个带有参数的 url 重写为另一个漂亮的 url?
- qt - 如何在 QtDesigner 中将 QMenuBar 添加到 QWidget
- c - 链接时出现 CMake PUBLIC / INTERFACE 问题