Question

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

我已经为每个浏览器逐步列出了程序，并添加了一个链接到图片，显示了它是如何完成的。

我想在PHP文件中显示图片，该文件获取所需的图像文件并根据其参数s和b在页面上显示，这些参数代表s: step和{{ 1}}。

我的jQuery是

b: browser

它应该加载$(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); }); });但没有任何反应。 HTML是（仅限部分）

./images/proxy_settings/proxy.php?b=ie&s=1

模态就在这里：

<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>

Proxy.php文件内容在这里：

<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>

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

我试图将if (isset($_GET['b']) && isset($_GET['s'])) { echo '<img src="proxy_setting_' . $_GET['b'] . '_' . $_GET['s'] . '.png " />'; } else { exit; }放入alert("HEY");事件中。它也没用。

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

文件结构树如下所示：

$("a[id^='proxy_']").click();

虽然脚本响应另一个相同的事件，但脚本不会监听点击事件：

这适用于同一个文件（script.js）：

|.
|-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

Answer 1

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

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

Answer 2

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

文件夹中

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

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

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

Answer 3

首先，我向你道歉，浪费你宝贵的时间。

我试图使用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本身，问题就消失了。

未使用jQuery加载模态内容

3 个答案: