Запуск Bootstrap модальный после манипуляции с DOM

Question

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

Кроме того, мы перепрыгиваем между двумя и тремя столбцами в зависимости от размера экрана, чтобы серверное решение не сокращало его.

Это выполняется в файле сценария внутри функции $(document).ready();. На одной странице у нас есть модаль, который также перемещается нашей повторяющейся функцией. Из-за этого, JQuery не распознает элемент, когда мы пытаемся заставить его позвонить $('#modalID').modal('show');

Поскольку это не закреплять в к событию, я не могу использовать .on функции JQuery, чтобы я нахожусь немного о том, как найти $('#modalID'), чтобы я мог его показать.

Самая большая трудность состоит в том, что, поскольку наш повторяющийся код работает на любой странице, мы не можем настроить его для этого конкретного экземпляра, поэтому, я думаю, мне нужен способ почти повторного анализа DOM.

Есть ли способ обойти это?

Благодаря

Редактировать: код, добавленный ниже для ясности (надеюсь)

Главная JS файл (Приводимые ниже функции работают на $(document).ready и ищет все элементы с классом «JS-reflowitem» , делит их на списки примерно равного размера на основе количества видимых элементов «js-reflowcontainer» и добавляет элементы к их соответствующему родительскому элементу. Это необходимо для обеспечения правильного вертикального упорядочения (клиенты требуют - я думаю, что он должен проходить горизонтально, что отрицает необходимость для всего этого!) или элементов без пробелов, независимо от того, из которых элементы визуализируются)

var colCount = 0; 

function split(a, n) { 
    var len = a.length, out = [], i = 0; 
    while (i < len) { 
     var size = Math.ceil((len - i)/n--); 
     out.push(a.slice(i, i + size)); 
     i += size; 
    } 
    return out; 
} 

function reflowPage() { 
    var flowableItems = [], splitItems = []; 
    $(".js-reflowparent").each(function (i) { 
     flowableItems = $(this).find(".js-reflowcontainer .js-reflowitem"); 
     colCount = $(this).find(".js-reflowcontainer:visible").length; 
     splitItems = split(flowableItems, colCount); 
     $(this).find(".js-reflowcontainer").empty(); 
     $(this).find(".js-reflowcontainer:visible").each(function (j) { 
      $(this).append(splitItems[j]); 
     }); 
    }); 
} 

Один из элементов, которые мы могли бы быть отображающими содержит кнопку, которая отправляет обратно на сервер, чтобы заполнить модальный (который содержится в упомянутом элементе так, что код модального не возвращается в браузер, если нет способа его запуска) с некоторыми данными, на которые нам нужно действовать (модальный, в свою очередь, также должен отправлять сообщения на основе действий пользователя). Это модальное необходимо загрузить сразу так, на постбэка, вызванное тем, что кнопка, мы выплюнуть следующий JS (который запускается после выше код):

$(document).ready(function() { 
    $('#myModal').appendTo($('form:first')); 
    $('#myModal').modal('show'); 

    $('#btnCloseModal').click(function (event) { 
     event.preventDefault(); 
     $('#myModal').modal('hide'); 
    }); 
}); 

Причиной этого является особенно сложным является то, что страница, над которой мы работаем, на самом деле является элементом управления .ascx, который отображается внутри «js-reflowcontainer», поэтому мы даже не можем отображать кнопку, которую мы можем щелкнуть программно.

Я попытаюсь использовать технику jalilIrfan, предложенную с некоторыми незначительными хитростями, и отчитается завтра. Я также увижу, могу ли я переместить логику на вызов ajax, чтобы предотвратить некоторые странности, вызванные нашими повторными обратными передачами.

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

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

Спасибо за предложения, ребята!

Answer 1

вместо $ ("# xxtt"). Modal ("show"). Почему бы вам не попытаться иметь скрытую кнопку мыши и вызвать кнопку мыши, когда все хотят как

<!-- Buttons -->'' 
    <button type="button" data-toggle="modal" data-target="#myModal" class="hide showModal"></button> 

    (**or**) 

    <!-- Other elements --> 
    <p data-toggle="modal" class="hide showModal" data-target="#myModal">Open Modal</p> 

Тогда когда вы хотите просто стрелять событие щелчка

$(".showModal").click(); 

Надеется, что это помогает