Question

我正在学习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'); ?>'>&nbsp;</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

媒体查询中的jQuery函数未按预期触发

0 个答案: