Question

我有一个Index.php文件，它进行ajax调用并加载一个php页面在使用ajax加载的php页面中，我有一个html表单。我正在尝试从Index.php进行另一个ajax调用，如果更改了一个选择框，则会进行新的ajax调用。

一切正常，但选择框的更改为ajax。

我认为它与使用ajax加载表单并且on更改使用ajax这一事实有关。

这可能吗？

$(document).ready(function() {

    $("#message-loading").show();

    var dataString = 'id='+ id;

    $.ajax
    ({
        type: "POST",
        url: "details.php",
        data: dataString,
        success: function(html)
        {
            document.getElementById('message-box-body').innerHTML = html;   
            $("#message-loading").hide();
        }       
    });

这是选择更改代码

$(".selectbox").change(function()
    {
        var id=$(this).val();
        var dataString = 'id='+ id;
        $.ajax
        ({
            type: "POST",
            url: "another-page.php",
            data: dataString,
            cache: false,
            success: function(html)
            {
                $(".another-selectbox").html(html);
            } 
        }); 
    });

选择框位于第一个ajax调用的php页面内。 ajax更改应为第一个php页面中的另一个选择框加载新值。

如果我不使用ajax加载php页面，我有这个工作。

Answer 1

jQuery在运行时只知道页面中的元素，因此添加到DOM的新元素（例如，通过AJAX）无法被jQuery识别。

要解决这个问题，要么重新绑定你的jQuery函数，要么使用event delegation，将新添加的项目中的事件冒泡到jQuery在页面加载时运行时的那个点。许多人使用document作为捕捉泡沫事件的地方，但是在DOM树上走高的位置并不是必需的。理想情况下you should delegate to the nearest parent that exists at the time of page load.

Answer 2

您可以使用$(document).on在页面上访问新创建的元素 $(document).ready只知道加载页面时存在的元素。

因此，对于加载页面时存在的元素，您将使用：

$(document).ready(function(){   
    $("#element").click(function() {
       alert("You clicked an element that existed when you loaded this page.");
    });
});

对于加载页面时不存在的元素，您将使用以下内容：

$(document).on({
    click: function () {
       alert("You clicked an element that DID NOT exist when you loaded this page.");
    },
}, '#element');

Ajax调用无法与其他Ajax调用

2 个答案: