草庐IT

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

不秃头的小李同学 2023-03-28 原文

问题描述：

当利用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');
});
});
结果如下所示


新创Jquerybrsectionfeedbackwordsjqueryjsajaxcsside云平台云计算

有关利用ajax动态生成元素Jquery无法获取新创建的元素的解决方法的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

    总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  3. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

    我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？ 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

  4. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  5. ruby - Facter::Util::Uptime:Module 的未定义方法 get_uptime (NoMethodError) - 2

    我正在尝试设置一个puppet节点，但ruby​​gems似乎不正常。如果我通过它自己的二进制文件(/usr/lib/ruby/gems/1.8/gems/facter-1.5.8/bin/facter)在cli上运行facter，它工作正常，但如果我通过由ruby​​gems(/usr/bin/facter)安装的二进制文件，它抛出:/usr/lib/ruby/1.8/facter/uptime.rb:11:undefinedmethod`get_uptime'forFacter::Util::Uptime:Module(NoMethodError)from/usr/lib/ruby

  6. ruby-on-rails - 由于 "wkhtmltopdf"，PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  7. Ruby 方法() 方法 - 2

    我想了解Ruby方法methods()是如何工作的。我尝试使用“ruby方法”在Google上搜索，但这不是我需要的。我也看过ruby​​-doc.org，但我没有找到这种方法。你能详细解释一下它是如何工作的或者给我一个链接吗？更新我用methods()方法做了实验，得到了这样的结果:'labrat'代码classFirstdeffirst_instance_mymethodenddefself.first_class_mymethodendendclassSecond使用类#returnsavailablemethodslistforclassandancestorsputsSeco

  8. ruby-on-rails - 无法使用 Rails 3.2 创建插件？ - 2

    我对最新版本的Rails有疑问。我创建了一个新应用程序(railsnewMyProject)，但我没有脚本/生成，只有脚本/rails，当我输入ruby./script/railsgeneratepluginmy_plugin"Couldnotfindgeneratorplugin.".你知道如何生成插件模板吗？没有这个命令可以创建插件吗？PS:我正在使用Rails3.2.1和ruby​​1.8.7[universal-darwin11.0] 最佳答案 随着Rails3.2.0的发布，插件生成器已经被移除。查看变更日志here.现在

  9. ruby-on-rails - Rails 3.2.1 中 ActionMailer 中的未定义方法 'default_content_type=' - 2

    我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer

  10. ruby - 无法运行 Rails 2.x 应用程序 - 2

    我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby​​:$rvmuseree-1.8.7-head我尝试运行服务器，然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r

随机推荐