Question

这是从php文件动态加载数据的代码：

 $(document).ready(function(){
            function loading_show(){
                $('#loading').html("<img src='demo/img/ajax-loader.gif'/>").fadeIn('fast');
            }
            function loading_hide(){
                $('#loading').fadeOut('fast');
            }                
            function loadData(page){
                loading_show();                    
                $.ajax
                ({
                    type: "POST",
                    url: "pagination/load_data.php",
                    data: "page="+page,
                    success: function(msg)
                    {
                        $("#container2").ajaxComplete(function(event, request, settings)
                        {
                            loading_hide();
                            $("#container2").html(msg);
                        });
                    }
                });
            }
            loadData(1);  // For first time page load default results
            $('#container2 .pagination li.active').live('click',function(){
                var page = $(this).attr('p');
                loadData(page);

            });           
            $('#go_btn').live('click',function(){
                var page = parseInt($('.goto').val());
                var no_of_pages = parseInt($('.total').attr('a'));
                if(page != 0 && page <= no_of_pages){
                    loadData(page);
                }else{
                    alert('Enter a PAGE between 1 and '+no_of_pages);
                    $('.goto').val("").focus();
                    return false;
                }

            }); });

此代码已成功运行并且已给出输出。现在我想在动态加载的数据上添加onclick事件，代码为：

function  favourites(gymusernamefav){
                         $("#container2 .shortlisted").html("hello");     
                $.ajax
                ({
                    type: "POST",
                    url: "http://fvilla.in/markfavourite.php",
                    data: 'gymusernamefav='+ gymusernamefav,
                    success: function(html)
                    {
                        $("#container2").ajaxComplete(function(event, request, settings)
                        {

                            $("#container2 .shortlisted").html("hello");
                        });
                    }
                });


            }


 $('#container2 .shortlisted').live('click',function(){
                var gymusernamefav =  $(this).attr("id");
                favourites(gymusernamefav);
                return false;
            });

此代码也已成功运行，但未在

中进行更改

$("#container2 .shortlisted").html("hello");

在onClick之后没有对类.shortlisted进行任何更改（仅在几秒钟内进行更改，之后会看到旧文本）但是ajax部分正在成功运行且查询也是执行。

Apreciate任何帮助。

Answer 1

委派事件的优势在于，他们可以处理来自稍后添加到文档的后代元素的事件。通过选择附加委托事件处理程序时保证存在的元素，您可以使用委派事件来避免频繁附加和删除事件处理程序。

在处理新鲜DOM（由js动态添加）时，您应该使用事件委派 on() 而不是弃用的方法 live() ：< / p>

$('body').on('click','#container2 .shortlisted', function(){

希望这有帮助。

Answer 2

请尝试此

$(document).delegate("#container2 .shortlisted", "click", function() {
  var gymusernamefav = $(this).attr("id");
  favourites(gymusernamefav);
  return false;
});

delegate()方法为指定元素附加一个或多个事件处理程序，这些元素是所选元素的子元素，并指定在事件发生时运行的函数。 使用delegate（）方法附加的事件处理程序将适用于当前和FUTURE元素（如脚本创建的新元素）。

从jQuery 1.7开始，on()方法是为所选元素附加事件处理程序的首选方法。

从jQuery 1.7开始，不推荐使用.live（）方法。使用.on（）附加事件处理程序。旧版jQuery的用户应该使用.delegate（）而不是.live（）。

Answer 3

对于新创建的元素，您可以使用：

$(document).on('click', '#container2 .shortlisted', function(){
 ..............   your code  .......
});

在之前的jQuery版本（1.7）中，您可以使用live()

尝试从以下位置更改选择器：

$("#container2 .shortlisted")

要：

$("#container2.shortlisted")

选择器中的两个元素之间没有空格，否则您正在寻找具有类入围名单的container2的子元素。

Answer 4

对动态加载和生成的元素使用事件委托：

$(document).on('click','#container2 .shortlisted', function(){
       favourites($(this).attr("id"));
       return false;
 });

动态加载的数据不会对onclick事件进行更改

4 个答案: