Jquery 不适用于 Ajax 生成的 HTML

Question

在我使用 ajax 对我的产品页面进行排序并用 ajax 新生成的 DOM 覆盖现有的 DOM 元素后，我的 JavaScript 不起作用。当我对缩放产品图像等产品进行排序时，所有效果都消失了。我阅读了不同的文章，这些文章告诉我应该使用 .on 来绑定我的 DOM，但 .on 以防万一。下面我展示代码

$(document).ready(function (){

            function callAjax (){

                if ($("#brandId").val() == "")
                {
                    var brandId;
                }
                else
                {
                    var brandId = $("#brandId").val();
                }
                if ($("#categoryId").val() == "")
                {
                    var categoryId;
                }
                else
                {
                    var categoryId = $("#categoryId").val();
                }
                if ($("#genderId").val() == "")
                {
                    var genderId;
                }
                else
                {
                    var genderId = $("#genderId").val();
                }
                if ($("#stockId").val() == "")
                {
                    var stockId;
                }
                else
                {
                    var stockId = $("#stockId").val();
                }

                $.ajax({
                    url: baseUrlForExternalJS.baseUrl + "site/sort_products",
                    type:"POST",
                    data: {'brandId':brandId, 'categoryId' : categoryId, 'genderId' : genderId , 'stockId' : stockId },
                    success: function(msg){
                        $('#products').html(msg);
                    }
                });
            }

            $("#categoryId").on('change', function(){
                //alert('called');
                callAjax();
            });
            $("#genderId").on('change', function(){
                //alert('called');
                callAjax();
            });
            $("#stockId").on('change', function(){
                //alert('called');
                callAjax();
            });

            $("#brandId").on('change', function(){
                callAjax();
            })

        });
 </script>

Answer 1

使用委托的事件处理程序，所有 if/else 条件都不是必需的，也不是所有做同样事情的单独事件处理程序：

$(document).ready(function () {
    function callAjax() {
        var brandId    = $("#brandId").val(),
            categoryId = $("#categoryId").val(),
            genderId   = $("#genderId").val(),
            stockId    = $("#stockId").val();

        $.ajax({
            url: baseUrlForExternalJS.baseUrl + "site/sort_products",
            type: "POST",
            data: {
                brandId    : brandId,
                categoryId : categoryId,
                genderId   : genderId,
                stockId    : stockId
            }
        }).done(function (msg) {
            $('#products').html(msg);
        });
    }

    $('#products').on('change', '#categoryId, #genderId, #stockId, #brandId', callAjax);
});

您还可以从 ID 构建数据并创建一些更简洁的内容，例如：

$(document).ready(function () {
    var elems = ['categoryId', 'genderId', 'stockId', 'brandId'];

    $('#products').on('change', '#'+elems.join(',#'), function() {
        var data = {};
        $.each(elems, function(_,id) {data[id] = document.getElementById(id).value;});
        $.ajax({
            url: baseUrlForExternalJS.baseUrl + "site/sort_products",
            type: "POST",
            data: data
        }).done(function (msg) {
            $('#products').html(msg);
        });
    });
});

Answer 2

将您的代码更正为：

 $('#products').on('change',"#categoryId", function(){
                //alert('called');
                callAjax();
            });

//like wise change for all remaining.

http://api.jquery.com/on/

Answer 3

您在这里对.on() 的使用是错误的。

对于动态元素，您需要基于事件传播的事件处理程序，为此您需要使用不同的语法

喜欢

$(document).on('<event>', '<selector>', handler)

前

        $(document).on('change', '"#stockId"', function(){
            //alert('called');
            callAjax();
        })

Answer 4

如果您用于效果的 id 在文档准备好时应该可用，另外，您需要在通过 ajax 更新内容后调用该函数。

但最好将您的效果和动画移动到一个函数，并将 ajax 发布到另一个函数 然后在文档准备好并在 ajax 成功之后调用它。

您可以以更好的方式进行调试。并且可以避免类似的错误。

如果你能给出你的完整代码，我可以尝试为你调试。

Answer 5

我也有这个问题，但我找到了答案。

就像上面的人说的那样。您的 .on() 函数可以解决问题。

在 jQuery 网站上here

事件处理程序仅绑定到当前选定的元素；在您的代码调用 .on() 时，它们必须存在于页面上。 为确保元素存在并且可以被选择，请在 HTML 中的元素的文档就绪处理程序内执行事件绑定页面上的标记。如果将新 HTML 注入页面，请在将新 HTML 放入页面后选择元素并附加事件处理程序。或者，使用委托事件来附加事件处理程序，如下所述。

这意味着如果您正在调用 ajax 代码（加载代码时不存在的事件处理程序），您需要将其绑定到存在的元素。

这是一个例子：

$( "body" ).on( "click", "p", function() {
    alert( $( this ).text() );
});

您也可以在上面的链接中看到这一点。它显示了它是如何工作的。