Jquery 怎么获取动态生成的html元素，然后给其中的元素添加样式

Posted 2023-05-08

参考技术A 　　获取匹配元素集合中的第一个元素的当前计算高度值 或 设置每一个匹配元素的高度值。
　　-.css('height') 和 .height()之间的区别是后者返回一个没有单位的数值，前者是返回带有完整单位的字符串。当一个元素的高度需要数学计算的时候推荐使用.height() 方法 。
　　-这个方法同样能计算出window和document的高度。
　　$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of html document
　　-为匹配的元素集合中获取第一个元素的当前计算高度值,包括padding，但是不包括border。
　　-这个方法返回元素的高度，包括顶部和底部的padding，单位是像素。
　　-这个方法不适用于window and document对象，可以使用.height()代替。 参考技术B 使用ajax或者jquery动态创建的元素，例如'<select
id="dbc">'，是无法用$("#dbc")获取的。
用法如下：
$(selector).live("event", data, function());
data为可选参数，规定传递到该函数的额外参数
e.g:
$("#store").live("change", function()
$("#username").val($("#store").val() + "_" + $("#limits").val());
);
$("#username")是使用ajax动态创建的'<select id="username">'

利用ajax动态生成元素Jquery无法获取新创建的元素的解决方法

问题描述：

当利用ajax技术动态创建元素时，jQuery无法获取到元素

①创建元素

ajax代码：

$.ajax(
    url: /users/getdata,
    method: post,
    dataType: json,
    success: function(data) 
        let temp = ;
        console.log(data);
        // 遍历data数据
        for (var k = 0; k < data.length; k++) 
            console.log(data[k][0].author);
            temp += <div class=" row col-12 messages"><div class="col-12 messagebox left"><span class="username">;
            temp = temp + data[k][0].author + </span>;
            temp = temp + <span class="datetime"> + data[k][0].time + </span>;
            temp = temp + <span class="usericon"></span><span class="messagedelete">删除</span></div>;
            temp = temp + <div class="col-12"><span class="message"> + data[k][0].content + </span></div>;
            for (var i in data[k]) 
                if (i == 0)
                    continue;
                else 
                    console.log(data[k][i]);
                    temp = temp + <div class="col-12 feedbacmessage"><span class="feedbackName"> + data[k][i].author + </span><span feedBackMessage>:  ;
                    temp = temp + data[k][i].content + </span><span class="feedbackdelete">删除</span></div>
                
            
            temp += <div class="col-4 feedbackinput"><form action="/users/submitfeedBackMessage" method="POST">;
            temp += <textarea class="feedbackwords" name="feedbackword" id="feedbackwords" cols="60" rows="1" placeholder="我也说一句"></textarea>;
            temp += "<input type=text name=tablename value=" + data[k][0].tableName + "style=display: none;>";
            temp += <button type="submit" class="btn btn-success mr-2">提交</button><button type="reset" class="btn btn-light">重置</button>;
            temp += </form></div></div>;
        
        $(.messagecontent).html(temp);
    
);

jquery代码：

$(function() 
            $(.feedbackwords).on(focus, function() 
                console.log(up);
                $(this).css(border, 1px solid #ccc);
                $(this).attr(rows, 2);
                $(this).parent().children(button).show();
            );
            $(.feedbackwords).mouseover(function() 
                $(this).css(border, 1px solid orange);
            );
            $(.feedbackwords).blur(function() 
                $(this).css(border, 1px solid #ccc);
                $(this).attr(rows, 1);
                $(this).parent().children(button).hide();
            );
            $(.feedbackwords).mouseout(function() 
                $(this).css(border, 1px solid #ccc);
            );
            console.log($(.feedbackwords));
            console.log(down);

        );

②页面显示元素没有获取

函数没有实现

解决办法

在网上查阅资料后发现动态添加的标签要事件委托才能获取到节点
修改代码如下：

$(function() 
        $(.messagecontent).on(mouseenter, function() 
            $(.feedbackwords).on(focus, function() 
                console.log(up);
                $(this).css(border, 1px solid #ccc);
                $(this).attr(rows, 2);
                $(this).parent().children(button).show();
            );
            $(.feedbackwords).mouseover(function() 
                $(this).css(border, 1px solid orange);
            );
            $(.feedbackwords).blur(function() 
                $(this).css(border, 1px solid #ccc);
                $(this).attr(rows, 1);
                $(this).parent().children(button).hide();
            );
            $(.feedbackwords).mouseout(function() 
                $(this).css(border, 1px solid #ccc);
            );
            console.log($(.feedbackwords));
            console.log(down);
        );
    );

结果如下所示