Активировать функцию jQuery/Javascript при загрузке страницы

Question

Я пытаюсь запустить функцию javascript/jQuery на двух отдельных таблицах после их загрузки, я попытался добавить событие hadler в таблицы HTML.

onload="filterItems();" 

Я также попробовал работу с документом. Я действительно запутался.

$(document).ready(filterItems); 

Единственный метод, который, как представляется, работает, - это обработчик события click, который не идеален для моей ситуации.

$('.filter-gift').click(filterItems); 

Я так же, как функции для запуска один раз для каждой таблицы на странице загрузки, пожалуйста, обратите внимание на следующие jsfiddle https://jsfiddle.net/51Le6o06/41/, как вы можете видеть, что есть две таблицы, которые используют преимущества этой функции.

Я бы хотел, чтобы каждый из них заполнил фильтр на загрузке страницы, но функция готовности документа не работает по какой-либо причине - я думаю, что это может быть связано с тем, что есть две таблицы.

Херес яваскрипт и JQuery им с помощью:

$('.filter-gift').click(filterItems); 

function filterItems(e) { 
    var items = []; 
    var table = ''; 
    tableId = $(this).parent().parent().attr('tag') 

     var listItems = ""; 
     listItems += "<option value='0'> -Select- </option>"; 
     $('div[tag="' + tableId + '"] table.internalActivities .information').each(function (i) { 
      var itm = $(this)[0].innerText; 
      if ($.inArray(itm, items) == -1) { 
       items.push($(this)[0].innerText); 
       listItems += "<option value='" + i + "'>" + $(this)[0].innerText + "</option>"; 
      } 
     }); 

    $('div[tag="' + tableId+ '"] .filter-gift').html(listItems); 

    $('.filter-gift').change(function() { 
     var tableIdC = $(this).parent().parent().attr('tag'); 

     var text = $('div[tag="' + tableIdC + '"] select option:selected')[0].text.replace(/(\r\n|\n|\r| |)/gm, "");; 
      $('div[tag="' + tableIdC + '"] .product-information-row').each(function (i) { 
       if ($(this).text().replace(/(\r\n|\n|\r| |)/gm, "") == text) { 
        $(this).show(); 
        $(this).prev().show(); 
        $(this).next().show(); 
       } 
       else { 
        $(this).hide(); 
        $(this).prev().hide(); 
        $(this).next().hide(); 
       } 
      });   
     });  
} 

Может кто-нибудь сказать мне, как запустить функцию на каждом столе без необходимости взаимодействовать с ним на странице загрузки. Спасибо. Я упустил другие сценарии im, чтобы сделать их более ясными.

Благодаря

Answer 1

$(document).ready(function() { 
    $('.filter-gift').each(filterItems); 
}); 

Answer 2

Прежде это довольно простая задача, если нет дополнительных требований, присоединенных.

//jQuery document ready function to get Page Load 
jQuery(document).ready(function(){ //Use a directly nested function 
    jQuery('.filter-gift').each(filterItems); 
}); 

К сожалению, не было ни одного элемента с классом «фильтр-подарок», так что я не был в состоянии проверить «.parent) (» ссылки.