Метод jQuery on() не работает при замене метода ready()?

Question

Я пытаюсь использовать метод on() внутри функции, чтобы заменить метод ready(), поэтому я могу использовать более одного события для запуска функции. Вот общая функция Я хотел использовать его в:

function tableImgScale() { 
$(function() { 
    var bandTableHeight = $('#banddetails').height() + "px"; 

    $(document).ready(function() { 
     $('#banddetails td:nth-child(1)').css({"height": bandTableHeight, "overflow": "hidden"}); 
     $('#banddetails td img').css({"display": "block", "width": "100%", "height": "100%", "objectFit": "cover"}); 
    }); 
}); 
} 

Таким образом, проще говоря, я пытаюсь заменить: $(document).ready(function() {...
с: $(document).on('ready resize', function() {...

Но это не будет работать. Однако функция с экземпляром метода .ready() работает отлично. Любая помощь будет оценена по достоинству.

Answer 1

Вам не нужно звонить в $(document).ready.

Внутри вашей tableImgScale функции, вы пишете:

$(function() { 
    // stuff 
}); 

... это еще один способ ожидания для документа, который будет готов до вызова функции. Таким образом, ваш внутренний звонок $(document).ready не нужен. Однако, если вы хотите, чтобы ваши корректировки CSS выполнялись, когда документ готов, а также при изменении размера, я бы извлек эту логику в свою собственную функцию, чтобы вы могли сразу ее вызвать, а также установить ее как слушателя для resize.

function tableImgScale() { 
 
    $(function() { 
 
    function adjustBandDetails() { 
 
     $('#banddetails td:nth-child(1)').css({ 
 
     "height": bandTableHeight, 
 
     "overflow": "hidden" 
 
     }); 
 
     $('#banddetails td img').css({ 
 
     "display": "block", 
 
     "width": "100%", 
 
     "height": "100%", 
 
     "objectFit": "cover" 
 
     }); 
 
    } 
 
    var bandTableHeight = $('#banddetails').height() + "px" 
 
    adjustBandDetails() 
 
    $(document).on('resize', adjustBandDetails) 
 
    }); 
 
}