Question

jQuery(".location a").click(function()
        {
            var data="type=loc&data="+jQuery(this).attr('name');
            jQuery.ajax({
                   type: "POST",
                   url: "<?php echo home_url( '/' );?>wp-content/plugins/manageTeam/ajax.php",
                   data: data,
                   beforeSend: function(  ) {
                        jQuery(".teammemcont").hide();

                      },
                   success: function(msg){
                            jQuery(".teammemcont").html(msg);   
                            jQuery(".teammemcont").show();                                   
                    }
                }); 

        });

这里ajax返回的内容被加载到teammemcont容器中。如果我想通过ajax点击加载内容的类，那么它就不起作用了。这意味着点击事件不能处理ajax返回的内容。

Answer 1

这是因为在绑定事件时DOM中不存在相关元素。您需要使用on方法（如果您使用的是jQuery 1.7+）或delegate（如果您使用的是旧版本）绑定事件：

//jQuery 1.7+
$(".teammemcont").on("click", ".someClass", function() {
    //Newly added element clicked!
});

//Older versions...
$(".teammemcont").delegate(".someClass", "click", function() {
    //Newly added element clicked!
});

Answer 2

click()函数仅将事件处理程序绑定到运行时存在的元素，因此任何动态添加的内容都不会受到影响。为此，您需要使用一种方法将事件处理程序添加到动态生成的内容中，即on()（jQuery 1.7+）或delegate()（在jQuery 1.7之前）。 live()已弃用，不应使用。

Answer 3

您必须使用事件委派来考虑附加的元素。当简单地使用.click（）时，使用ajax加载的元素不在DOM中，因此没有任何内容绑定到它们。

使用.on()（或.delegate()）：

$('.teammemcont').on('click', '.location a', function(e) {
    ...
});

基本上，您将'.location a'元素上的click事件的处理委托给DOM中存在的父元素（您甚至可以访问文档元素）。
这样，将自动考虑在此容器中添加“.location a”元素。

Answer 4

单击事件仅在绑定事件侦听器时对页面上的元素起作用。

如果您希望您的点击事件能够处理已创建的元素（例如在您的情况下通过ajax），则在页面加载后，您需要使用众多委托函数之一。

如果您使用的是1.7或更高版本，请使用on()如果您使用的是早期版本，请使用delegate()。

on()

delegate()

Answer 5

您应该使用jquery的live方法将事件绑定到动态元素。在你的情况下你应该使用

$("class selector").live('click',function(){
//do stuff
});

jquery，ajax内容不可点击

5 个答案: