Question

在我用ajax对产品页面进行排序后，我的JavaScript无效，并用ajax用新生成的DOM覆盖现有的DOM元素。当我对缩放产品图像等产品进行排序时，所有效果都消失了。我读了不同的文章，告诉我应该使用.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() );
});

你也可以在上面的链接上看到。它显示了它的工作原理。

Jquery不适用于Ajax生成的HTML

5 个答案: