Блог

Я использую приложение MVC, jQuery и Bootstrap 4. Когда пользователь нажимает на кнопку, я загружаю частичное представление, содержащее модальный диалог, и показ выглядит следующим образом:

 function loadModal(url, data)
    $.ajax({ 
        url: url, data: data, type: "GET",
        success: function (data) { showModal(data); },
    });
}   

function showModal(data) {
    var $dialog = $(data);
    $("body").prepend($dialog);
    $dialog.modal({ show: true, keyboard: true, backdrop: 'static'});
}
 

В других случаях иногда я просто заменяю html-часть документа, загруженную:

 function loadPartial(url, data, targetSelector)
    $.ajax({ 
        url: url, data: data, type: "GET",
        success: function (data) { $(targetSelector).html( data ); },
    });
}   
 

Это просто. Работает хорошо.

Моя проблема начинается сейчас: если частичное представление содержит html — элементы с определенными атрибутами-я хочу обработать их следующим образом:

 function siteIsModified($html) {
   $("select.selectpicker", $html).selectpicker();
   $('input[data-autocomplete]', $html).each(setupAutoComplete);
   ...
}
 

К сожалению, наша библиотека JS содержит несколько функций вызова загрузки ajax — я не хочу добавлять вызов siteIsModified(..) ко всем из них. Новые функции могут быть разработаны позже — и могут забыть вызвать эту функцию.

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

 $(document).ready(function () {
  $(document).on("click", '[data-on-click-toggle="ajaxTab"]', onClickAjaxTab);
  siteIsModified($(body));
  ...
}
 

Как я могу написать такой код, который будет вызываться автоматически при изменении документа (и это решение не будет зависеть от $.ajax, поскольку мы заменяем его для извлечения)? Или я могу написать эти строки обработки, как в документе на:

 // I am afraid it wont executes on the ajax loaded parts - or good as general
$(document).on("load","select.selectpicker", function() {$(this).selectpicker();})
 

Я думаю, что вызов этой функции siteIsModified() не подходит для частичного представления, так как я думаю, что она выполняется до добавления html-части в DOM и не может обрабатываться самостоятельно. И что еще более важно: это не элегантное решение-добавлять этот фрагмент JS в каждое частичное представление в конце 🙁

 <div>... some partial view content goes here...</div>
<script type="text/javascript">siteIsModified(??)</script>