Есть 2 обработчиков вызвать одну функцию с JQuery

Question

У меня есть самозагрузки Javascript таблицы, которая в настоящее время загружает, когда документ будет готов, например, так:

$(document).ready(function(){ 
    $('#table-javascript').bootstrapTable({ 
    method: 'get', 
    url: 'bootstrap_database.php', 
    height: 600, 
    cache: false, 
    striped: true, 
    pagination: true, 
    search: true, 
    pageSize: 20, 
    pageList: [20, 40, 60, 100, 200], 
    minimumCountColumns: 2, 
    clickToSelect: true, 
    columns: [{ 
     field: 'ID', 
     title: 'ID', 
     align: 'center', 
     visible: false 
    },{ 
     field: 'title', 
     title: 'Title', 
     align: 'center', 
     sortable: true, 
     width: '20' 
    },{ 
     field: 'audio', 
     title: 'Audio', 
     align: 'center', 
     width: '20' 
    },{ 
     field: 'sheet1', 
     title: 'Sheet 1', 
     align: 'center', 
     width: '20' 
    },{ 
     field: 'sheet2', 
     title: 'Sheet 2', 
     align: 'center', 
     width: '20' 
    },{ 
     field: 'sheet3', 
     title: 'Sheet 3', 
     align: 'center', 
     width: '20' 
    },{ 
     field: 'lyrics', 
     title: 'Lyrics', 
     align: 'center', 
     width: '20' 
    },{ 
     field: 'sheet1notes', 
     title: 'Notes 1', 
     align: 'center', 
     width: '20' 
    },{ 
     field: 'sheet2notes', 
     title: 'Notes 2', 
     align: 'center', 
     width: '20' 
    },{ 
     field: 'sheet3notes', 
     title: 'Notes 3', 
     align: 'center', 
     width: '20' 
    }], 
    aoColumnDefs: [{ 
     bSearchable: false, 
     bVisible: true, 
     aTargets: [0] 
    }] 

    }); 
}); 

Я хотел бы, чтобы перезагрузить таблицу в других частях моей страницы , Моя идея состоит в том, чтобы иметь пару обработчиков, которые могут скрыть эту функцию. Возможно, это сделает .click() или .change(). Но я не уверен, что у меня может быть несколько обработчиков, уволяющих одну и ту же функцию.

Вот пример AJAX вызова, который я хотел бы, чтобы обновить таблицу после success:

$("#addnewsong").on("submit", function(event) { 
    $('.newsongupprog').replaceWith('<i class="fa fa-spin fa-spinner"></i>'); 
    thisdata = new FormData($("#addnewsong")[0]); 
    $.ajax({ 
     url: "multiple_upload_ac.php?", 
     data: thisdata, 
     type : "post", 
     cache: false, 
     contentType: false, 
     processData: false, 
     success: function(data){ 
      $('.fa-spinner').replaceWith('<i class="fa fa-check"></i>'); 
      $('.fa-check').replaceWith('<i class="fa fa-cloud-upload"></i>'); 
      if (data == 'go') { 
       data = "Your song has been uploaded"; 
      } else { 
       data = "There was a problem uploading some of your files, please search for your song title and add your files manually"; 
      } 
      $('div.alert3').fadeIn(); 
      $('div.alert3').html(data); 
      $('div.alert3').delay(5000).fadeOut(); 

      $table.bootstrapTable('refresh', { 
       url: 'bootstrap_database.php' 
      }); 
     }, 
    }); 
    return false; 
}); 

У меня есть ощущение, что мой подход к этому является далеко, так что я мог получить некоторые эксперты в пролить свет на это.

Answer 1

Вы должны объявить переменную $tableперед тем вы пытаетесь использовать его (refresh таблицу) в AJAX success CallBack

$(document).ready(function(){ 

    // declare $table variable: 
    var $table = $('#table-javascript').bootstrapTable({ 
     // ... configuration ... 
    }); 

    //then submit event handler: 
    $("#addnewsong").on("submit", function(event) { 
     // ... 
    }); 

});