ajax 返回后未初始化其他 jQuery 弹出窗口

Posted 2023-05-09

【中文标题】ajax 返回后未初始化其他 jQuery 弹出窗口

【英文标题】：Additional jQuery popups not initialized after ajax return

【发布时间】：2014-11-21 22:39:31

【问题描述】：

我正在使用无页解决方案来显示位置列表。其中一些位置包括此 jQuery 弹出窗口，用于在框中显示其他数据。然而，问题在于，在以下 ajax 追加时，为使页面继续下降而添加的新位置不会保持弹出功能。

如何初始化添加到页面的新弹出窗口？

<div data-role="popup" id="@l.location_id"  data-corners="false" data-tolerance="50,30">
    Content
</div>

谢谢！

【问题讨论】：

您没有显示弹出窗口是如何初始化的，但您可能还需要使用事件委托来初始化动态创建的元素。请提供更多代码。

初始化就在那里。见：demos.jquerymobile.com/1.4.3/popup

欢迎来到 SO。将人们发送到互联网上查看代码并不是一种好的做法。请在您的问题中显示您的代码此处。

请继续，因为您不明白这个 jquery 弹出窗口的初始化已经在问题范围内。

动态添加 html 后是否调用$("#id_of_your_div").popup();？仅使用数据属性不适用于动态添加的元素。

【参考方案1】：

当页面加载并初始化 jQuery mobile 时，它​​会查找任何具有属性 data-role="popup" 的 div 并初始化弹出窗口。问题是此代码在页面加载时运行一次，并且未注册动态创建的 div。但是，您可以通过执行以编程方式初始化弹出窗口小部件

$(selector).popup()

selector可以是新添加的div的id。

【讨论】：

谢谢！似乎新弹出窗口上关闭按钮的 CSS 也必须重新引入页面。有没有更优雅的方法来做到这一点？

嗯，我不太清楚你的意思。您是说关闭按钮的外观与其他弹出窗口不同吗？如果是这样，您只需要确保在新添加的 div 中指定了相同的 css 类。看看这里http://jsfiddle.net/3cbw2765/