Question

我遇到了一个自定义AJAX库的问题，其工作原理如下：

示例自定义AJAX

<input type="button" name="button" id="button" value="Save"
    onclick="process_form(
        'save_form',            //form ID
        'index.php?c=save',     //AJAX call to server with form data
        'index.php?c=homepage', //AJAX call to redirect on Success
        'home_page_div',        //DIV that will accept above redirect response
        'POST'                  //method to use for form data
    );" />

<!--
This is how custom AJAX activates a function after it is done 
and also where I could activate an INDIVIDUAL box,
but I don't know know them ahead of time
-->
<img src="icons/blank.png" onload="validate_data()" />

问题

它不会激活jQuery Modal框。我注意到当我使用jQuery自己的AJAX调用时，会激活模态框。对我来说，这是多么神秘。似乎jQuery激活了拉入DIV的响应中的所有JS代码。但是在我的情况下，我的自定义AJAX不会激活JS或模态框。

可能的解决方案

在我的onload框中，我可以指定要激活的模式框。但我提前不知道模态框ID。

可能的解决方案2

使用jQuery重写AJAX调用（删除自定义AJAX调用）。问题：有很多地方使用自定义ajax，这样的重写是不切实际的。我确实在某些地方进行了重写，但很多功能都是基于自定义ajax调用，而我更喜欢不同的解决方案。的问题

如何激活所有jQuery模态框？

例如，jQuery为标签提供了这个：

<script>
$(function() {
  $( "#tabs" ).tabs();
});
</script>

段

$(function() {
  $("#dialog1").dialog();
});

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">

<div id="dialog1" title="Basic dialog">
  <p>Dialog 1 has been activated.</p>
</div>

<div id="dialog2" title="Basic dialog">
  <p>Dialog 2 is NOT activated :(</p>
</div>

<div id="dialog3" title="Basic dialog">
  <p>Dialog 3 is NOT activated :(</p>
</div>

奖金

为什么jQuery会激活通过AJAX提取到DIV中的响应中包含的所有JS / jQuery，而其他一些方法则不会。

Answer 1

您应该按类选择，而不是按ID选择。您需要将相同的类添加到每个对话框div中，如此

<div id="dialog1" class="modalDialog" title="Basic dialog"> 
  <p>Dialog 1 has been activated.</p>
</div>

<div id="dialog2" class="modalDialog" title="Basic dialog">
  <p>Dialog 2 has been activated.</p>
</div>

<div id="dialog3" class="modalDialog" title="Basic dialog">
  <p>Dialog 3 has been activated.</p>
</div>

然后你可以打开所有对话框：

$(function() {
  $(".modalDialog").dialog();
});

您可以在this fiddle中看到它。

Answer 2

结果还有其他问题，例如我的页面上的其他JS / jQuery在按下<submit>按钮时被加载到DIV中。

因此只启用jQuery Box并没有帮助。有更多的JS代码可以启用。

基本上我的问题是“在响应对象中找到JS代码并放入DIV而不是激活”。我的自定义AJAX库没有帮助。

用jQuery机制替换它，添加了 MAGIC ，它执行了在AJAX响应内容中的 ALL my JS 。

如何激活所有jQuery模态框（提前知道他们的无人ID）？

2 个答案: