重复调用上的语义Ui情态重复 [英] Semantic Ui Modal duplicated on repeated calls

问题描述

我有一段jQuery代码，它将文件加载为

$(".data_container").load(base_path+"sign_up/signup.php?trigger_id=random");

signup.php包含

<?php include_once("../libs/php_header/php_header.php"); ?>

<div class="ui modal s_umodal">
<i class="close icon"></i>
<div class="header">
Modal Title
</div>
<div class="image content">
<div class="image">
An image can appear on left or an icon
</div>
<div class="description">
 A description can appear on the right
</div>
</div>
<div class="actions">
<div class="ui button">Cancel</div>
<div class="ui button">OK</div>
</div>
</div>

<script>
$('.s_umodal')

.modal('show');
</script>

问题是，我可以调用模式框，它就会出现。但下次我点击触发器按钮(显示模式的按钮)时，它会显示另一个按钮，尽管我已经关闭了前一个按钮。因此，现在我只剩下两个模式箱。如果我点击多次，我会看到多个模式框。我正在使用语义用户界面。

推荐答案

实现的问题是，每次调用$('.data_container').load(base_path+"sign_up/signup.php?trigger_id=random");时，都会使用从该AJAX调用中获取的div创建一个新的DOM元素。$('.s_umodal').modal('show');然后显示从服务器返回的所有模式框。

在不显著地重新构建代码的情况下，一种方法是不反复获取div的内容。<div>将是包含DATA_CONTAINER的主html的一部分。您的AJAX调用可以返回显示该对话框的脚本。

HTML：

<div class="data_container"></div>
<div class="ui modal s_umodal">
    <i class="close icon"></i>
    <div class="header">
      Modal Title
    </div>
    <div class="image content">
    <div class="image">
      An image can appear on left or an icon
     </div>
    <div class="description">
       A description can appear on the right
    </div>
   </div>
   <div class="actions">
   <div class="ui button">Cancel</div>
   <div class="ui button">OK</div>
  </div>
</div>

您的AJAX调用可能返回：

<script>
  $('.s_umodal').modal('show');
</script>

加载内容的调用可以保持不变。

$(".data_container").load(base_path+"sign_up/signup.php?trigger_id=random");

但是，如果您准备进行重大更改，您可以尝试使用JSON Web服务，而不是返回<script>。

这篇关于重复调用上的语义Ui情态重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！