未使用 jQuery 加载的模态内容

Question

我正在尝试为用户制作一个关于代理设置的说明页面。

我已经为每个浏览器逐步列出了程序，并放置了一个图片链接来说明它是如何完成的。

我想在一个PHP文件中显示图片，该文件获取所需的图像文件并根据其参数s和b（分别代表s: step和b: browser）显示在页面上。

我的 jQuery 是

$(function() {

    $("a[id^='proxy_']").click(
            function() {  
                var b = $(this).data("b");
                var s = $(this).data("s");
                $("#proxy_modal_title").html("Proxy Settings");
                $("#proxy_modal_body").load("images/proxy_settings/proxy.php?b=" + b + "&s=" + s);
            });

});

它应该加载 ./images/proxy_settings/proxy.php?b=ie&s=1 但没有任何反应。 而 HTML 是（仅一部分）

<ol>
    <li>Click on Settings <a id="proxy_ie_step_01" data-s="1" data-b="ie" href="#proxyModal" data-toggle="modal" title="Show picture"> <span class="glyphicon glyphicon-picture"></span></a>
    </li>
    <li>Select Internet Options <a id="proxy_ie_step_02" data-s="2" data-b="ie" href="#proxyModal" data-toggle="modal" title="Show picture"> <span class="glyphicon glyphicon-picture"></span> </a>
    </li>
    <!-- goes on -->
</ol>

模态在这里：

<div class="modal fade" id="proxyModal" tabindex="-1" role="dialog" aria-labelledby="zkanoca" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="proxy_modal_title"></h4>
            </div>
            <div class="modal-body" id="proxy_modal_body">
            </div>
        </div>
    </div>
</div>

Proxy.php 文件内容在这里：

if (isset($_GET['b']) && isset($_GET['s']))
{
    echo '<img src="proxy_setting_' . $_GET['b'] . '_' . $_GET['s'] . '.png " />';
}
else
{
    exit;
}

模态打开，但模态标题或模态内容为空。我已经用 Firebug 进行了检查，但看不到任何错误。

我尝试将alert("HEY"); 放入$("a[id^='proxy_']").click(); 事件中。它也没有工作。

如果是路径问题，Firebug 会给我一个 404 错误。

文件结构树如下：

|.
|-js
  |-script.js
|-images
  |-proxy_settings
  |-proxy.php
  |-proxy_setting_ie_1.png
  |-proxy_setting_ie_2.png
  |-proxy_setting_ie_1.png
  |-proxy_setting_ie_3.png
  |-proxy_setting_ie_4.png
  |-proxy_setting_ie_5.png
  |-proxy_setting_ie_6.png
  |-proxy_setting_ie_7.png
|-instructionpage.html
|-messageform.php
|-index.php

脚本不监听点击事件，尽管它响应另一个相同的事件：

这在同一个文件 (script.js) 中有效：

jQuery("#sendMessage").click(
        function() {
            jQuery("#sendmessage_modal_title").html("Send A Message");
            jQuery("#sendmessage_modal_body").load("messageform.php");
        });

Answer 1

如果 li 元素是动态生成的，你应该试试这个：

$(document).on("click", "a[id^='proxy_']", function () {
       //    
});

Answer 2

首先我很抱歉浪费了你们宝贵的时间。

我试图使用 jQuery 的 load() 函数将 instructions.html 检索到 index.php 中。我搬家了

$(function() {

    $("a[id^='proxy_']").click(
            function() {  
                var b = $(this).data("b");
                var s = $(this).data("s");
                $("#proxy_modal_title").html("Proxy Settings");
                $("#proxy_modal_body").load("images/proxy_settings/proxy.php?b=" + b + "&s=" + s);
            });

});

到 instructions.html 本身，问题就消失了。

Answer 3

您的 .php 文件位于文件夹 images/proxy_settings/

也许在您的proxy.php 文件中将img src 更改为：echo '<img src="../proxy_setting_' . $_GET['b'] . '_' . $_GET['s'] . '.png " />';

更新： 我不知道为什么，但我的 Firebug 告诉我 404 Not Found 错误！ 将此代码替换为proxy.php，它应该可以工作。

echo '<img src="images/proxy_setting_' . $_GET['b'] . '_' . $_GET['s'] . '.png " />';