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

Change is not made onclick event on the data loaded dynamically

本文关键字:onclick 事件 数据 动态 加载      更新时间:2023-09-26

这是从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 部分已成功运行,并且还会执行查询。

感谢任何帮助。

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

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

请尝试这个

$(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()。

委托事件的优点是,它们可以处理以后添加到文档中的后代元素中的事件。通过选取在附加委托事件处理程序时保证存在的元素,可以使用委托事件来避免频繁附加和删除事件处理程序的需要。

当你处理新的 DOM(由 js 动态添加)时,你应该使用 on() 的事件委托而不是不推荐使用的方法 live():

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

希望这有帮助。

对于新创建的元素,您可以使用:

$(document).on('click', '#container2 .shortlisted', function(){ ..............  你的代码...});

在以前的jQuery版本(1.7)中,你可以使用live()

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

$("#container2 入围")

自:

$("#container2.入围")

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