Question

我对jQuery并不感到惊讶，但是我正在构建一个系统，用户可以从静态类别中选择启动Ajax请求（特别是.load），该请求在第二个SELECT语句中返回数据。

这完全符合我的目的。我遇到的困难是选择第二个SELECT语句来运行第二个Ajax请求。第二个请求根本没有输出，它似乎没有触发。

请让我知道如何改进我的jQuery以及如何让用户在第二个SELECT框中选择填充第三个SELECT框。

我的阿贾克斯：

$(document).ready(function() {

$("#squery").change(function(e) {

    SelectText = $("#squery").val();
    PassData = $("#pdata").html();
    if (SelectText == ""){
        $("#teamMailer").slideUp();
    }
    else {
        $("#teamMailer").load("mailerAjax.php", { SelectInput: SelectText, PermissionData: PassData });
        $("#teamMailer").slideDown();
    }
});

/**
THE BELOW DOES NOT APPEAR TO WORK OR FIRE AT ALL.
**/

$("#S_part2").change(function(e) {

    Part2Text = $("#S_part2").val();
    PassData = $("#pdata").html();
    if (Part2Text == ""){
        $("#teamMailer2").slideUp();
    }
    else {
        $("#teamMailer2").load("../includes/mailerAjax2.php", { SelectInput2: Part2Text, PermissionData: PassData  }, function( response, status, xhr ) {
            if ( status == "error" ) {
                var msg = "Sorry but there was an error: ";
                 $( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
                 }
        });
        $("#teamMailer2").slideDown();
    }
});
});

一些说明： mailerAjax.php文件包含完整的SELECT函数：

SELECT id="S_part2"
options
options
options
/SELECT

第一个Ajax的输出是完美的，但第二个ajax似乎没有触发，似乎没有返回。甚至没有错误。

我的HTML：

<div class="...">Select Recipient(s):</div>
            <div class="...">
<select name="Target" tabindex="1" required id="squery">
                    <option value="" selected>Choose...</option>
                    <option value="I">Individuals...</option>
                    <option value="T">A Team...</option>
                    <option value="G">A Group...</option>
                                        </select>
</div>
        </div>


        <div class="..." id="teamMailer">

        </div>
        <div class="..." id="teamMailer2">

        </div>

所以，1）我喜欢jQuery的.load函数的干净利落，但我是否需要使用其他函数，例如.post（我真的想避免GET数据传输）？

2）忽略这个

3）我知道一个基本的解决方案可能是已经在基本HTML中使用了SELECT框（未填充），但它看起来非常整洁，整个选择框只出现在填充后。

那么有没有办法从第二个框的ajax返回获得第三个Select框的Ajax返回？

任何指导如何处理这一点，非常感谢！

M

Answer 1

1）.load是GET请求。

2）否。

3）你的问题是你不能绑定一个不存在的元素。 S_part2我假设是从第一个请求加载的，所以你需要在更高级别绑定并让事件委托在事件冒泡时处理它。

所以不要这样：

$("#S_part2").change(function(e) { ...

试试这个：

$("#teamMailer").on("change","#S_part2", function(e) { ...

这会将处理程序附加到您确实存在的（我假设的）父div，并添加一个过滤器，以便只有在事件的原始源与id S_part2匹配时才会执行。

完全基于第一个ajax请求的结果发送Ajax请求

1 个答案: