用jquery追加内容

假设我们附加了一个错误通知html/css窗格/ div来显示从ajax调用返回给服务器代码返回的一些应用程序层错误。我们在错误的从服务器的JSON响应有效载荷存在分支并执行以下操作：用jquery追加内容

$('#message').remove(); 
$('body').append('<div id="message" style="display: none;"><a href="" id="message-close">Close</a></div>'); 
$('#message-close').before(data['message'] + '<ul id="errors"><li>' + data['errors'].join('</li><li>') + '</li></ul>'); 
$('#message').addClass('error').fadeIn();

这只是正常的，但如果人们能指出改进（基本或做出更优雅），我将不胜感激或者我可能错过的jquery端的缺陷。例如，用jQuery散布html片段可能会被认为是令人遗憾的。顺便说一下，在其他地方定义的＃message-close的click处理程序（以及成功分支），因为这是一个编辑示例。如果此问题属于代码评论网站而不是stackoverflow，请告诉我。我没有用过前者，但知道它存在。

来源

2011-08-03 m7d

该解决方案绝对不是更简洁，但我认为程序化方法可以扩展得更好，并且更适合处理异常和角落案例（当它们不可避免地出现时）。

它似乎比你的例子更直接地阅读使用append然后before等等。这从底层开始构建，并根据需要嵌套数据和事件处理程序。

$(function() { 

    // simulate ajax call 
    setTimeout(function() { 

     // ajax datas 
     var data = {errors: ['one', 'two', 'three']}; 

     // close handler 
     var closeMessage = function() { 
      $(this).parents("div").fadeOut(); 
      return false; 
     }; 

     // render dialog 
     $('<div id="message" style="display: none;"></div>').append(
      $('<ul id="errors"/>').append(
       $.map(data.errors, function(t) { 
        return $("<li/>").text("an error: "+t)[0]; 
       }))) 
      .append(
       $('<a href="#close" id="message-close">Close</a>') 
        .click(closeMessage)) 
      .appendTo("body") 
      .fadeIn(); 

    }, 1000); 

});

See it working here on jsFiddle

来源

2011-08-04 00:19:19

我喜欢你更多的功能底部的方法。谢谢你的深思熟虑的答案，并花时间回答。我表示你的答案是答案，如果有人遇到这个问题，我仍然希望看到其他答案。出于某种原因，尽管我已登录，但每次我试图授予您点数时，它都会要求我登录，即使我目前可以使用“注销”（以前从未遇到过此问题）。似乎SO目前有（或许）认证问题，尽管这似乎不太可能。 Anyhoo，谢谢，如果我现在可以的话，我会给你5分。 – m7d

哇，他们真的有认证问题。虽然我目前以m7d登录，那就是我，但我可以编辑你的答案（macek）。这就像没有cookie的会话固定攻击。离奇。应该在SO做一个有趣的一天。 – m7d

用jquery追加内容

回答

相关问题