Question

我在这里有一个非常小众的问题 - 不确定是否有人可以帮助我。为了维护我正在处理的站点的流程，我们在加载后动态地重新排序页面上的元素，因为在服务器上启用和禁用了元素，这在很多因素上变化很容易通过JavaScript执行。

此外，我们根据屏幕大小跳转两到三列，因此服务器解决方案不会削减它。

这在$(document).ready();函数内的脚本文件中运行。在一个页面上，我们有一个模态，它也被我们的重新流动功能所移动。因此，当我们尝试调用$('#modalID').modal('show');时，jQuery无法识别该元素

因为这不是一个事件，我不能使用jQuery的.on功能，所以我对如何处理有点不知所措找到$('#modalID')以便我可以展示它。

最大的困难在于，因为我们重新流动的代码在任何页面上运行，我们无法针对此特定实例进行调整，因此我认为我需要一种方法来重新解析DOM。

有什么方法吗？

由于

编辑：为了清晰起见，下面添加了代码（希望如此）

主JS文件（以下函数在$(document).ready上运行并查找具有类＆＃34; js-reflowitem＆＃34;的所有元素，根据可见＆的数量将它们分成大致相等的大小列表＃34; js-reflowcontainer＆＃34;元素并将项目添加到它们各自的父级。这是为了确保正确的垂直排序（客户要求 - 我认为它应该水平流动，这不需要所有这些！）或没有间隙的元素无论呈现哪些元素）

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控件，它在一个＆＃34; js-reflowcontainer＆＃34;所以我们甚至无法渲染一个按钮，我们可以以编程方式点击。

我将尝试使用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();

希望有所帮助

DOM操作后启动Bootstrap模式

1 个答案: