Question

使用以下代码动态加载内容时出现问题。

$(document).ready(function() {
             $("#tags").keyup(function(){
                        var q = $(this).val(); 
                        $.ajax({ 
                            url: '/AnswerMedia/utilities/autoSearch/model/suggest.php?q='+q, 
                            success: function (data) {
                                $("#ajaxDiv").html(data); 

                            },
                            error: function (request, status, error) {
                            alert(request.responseText);
                        }
                    });  
            });
        });

加载内容后，此代码用于在单击其中一个加载的div标记时触发事件，但不会。

$(".pdiv").click(function(){
    var val = $(this).text();
    $('#tags').val(val);
    $('.mncontr').hide();
});
$("#closeSearch").click(function(){
    $('.mncontr').hide();   
});

然后我尝试了以下代码：

$("body").delegate(".pdiv", "click", function(){
    var val = $(this).text();
    $('#tags').val(val);
    $('.mncontr').hide();
});
$("body").delegate("#closeSearch", "click", function(){
    $('.mncontr').hide();   
});

它在Firefox中运行良好，但在Chrome中，问题仍然存在。请帮我。

Answer 1

来自this SO帖子：

如果您希望单击处理程序适用于已加载的元素   动态地，然后在父对象上设置事件处理程序（即   没有动态加载）并给它一个匹配的选择器   像这样的动态对象：

$('#parent').on("click", "#child", function() {});

事件处理程序   将附加到#parent对象以及任何时候单击事件   起源于#child的起泡，它会触发你的点击   处理程序。这称为委托事件处理（事件处理   被委托给父对象。）

这样做是因为您可以将事件附加到#parent   即使#child对象尚不存在，但它何时出现   稍后存在并被点击，点击事件将冒泡到   #parent对象，它会看到它起源于#child和那里   是一个点击#child并触发你的事件的事件处理程序。

ajax加载了chrome的内容问题

1 个答案: