当通过jquery在dom中添加html元素时如何自动对html元素执行功能答案

【问题标题】：how to automatically perform a function on a html element when it added in dom by jquery当通过jquery在dom中添加html元素时如何自动对html元素执行功能
【发布时间】：2015-06-07 00:27:39
【问题描述】：

我想在添加到 DOM 时自动对具有特定类的 html 元素执行操作，

例如：-

<html>

  <head>

       <script type="text/javascript "src="jquery.min.js"> </script>
       <script type="text/javascript">

            $(document).ready(function(){

                 $('.hlo').attr('new', 'false'); 

            });

       </script>

  </head>

  <body>

      <span class="hlo"> blah blah </span>
      <span class="hlo"> blah blah </span>

  </body> 


</html>

这很好用，它为所有具有“hlo”类的html元素添加一个属性，但问题是一旦我通过ajax（或其他方式）加载更多数据，它就不起作用了，

我知道我可以这样做：-

$.ajax({
             type: 'GET',
             url: '/blah',
             success: function(data){

                 $('body').append(data);   // think data = <span class="hlo"> </span>
                 $('.hlo').attr('new', 'false'); 

            }
});

但我不希望这样，我想要的是由一些 jquery 插件来完成，例如当我们使用这样的滚动插件时：-

$('.my_select').custom_scroll();

然后它会自动工作，例如：

我什么时候会这样写-

<div class=".my_select">  

    <div class="inner">

          // data with custom scroll

    </div>

</div>

以便插件自动将其更改为这样：-

<div class="ss">

    <div class="ss_content">

           // now data with a custom scroll bar 

    </div>    

    <div class="scroll_bar_holder">

       <div class="scroll_bar"> </div>

    </div>

</div>

这就是我想做的，实际上我想做这个-

 <div class="tt">  hello world :)   </div>

当这个添加到页面时，它应该自动转换为

 <div class="tt"> hello world <img src="smile_emo.png"> </div>

意思是为带有特殊类的html元素自动更改一些带有图像或情感的符号

那么我怎样才能做到这一点？提前谢谢，:)

【问题讨论】：

您是否成功地将数据附加到正文并处理了您的脚本？
已编辑，我说我不想那样做，我想要一些滚动插件使用的方法我也解释了这个问题:(
如果您的逻辑是在 div 中添加图像，您可以使用自定义脚本编写，并且不使用类似滚动的插件
只想说，我猜你的 dom 中的类名不应该有点？
-->
已编辑 :) ，谢谢卡特琳

【解决方案1】：

use 可以使用如下代码。使用 ajaxcomplete 在页面上完成任何 ajax 调用时触发。所以在这种情况下，您不需要在每个 ajax 成功函数中放置一些通用代码

注意：我根据您的第一个示例发布我的答案

$(document).ready(function(){
   $( document ).ajaxComplete(function( event, xhr, settings ) {
    if ( settings.url === "/blah" ) {
       $('.hlo').attr('new', 'false');
       $('.tt').each(function(){
          if($(this).text().indexOf(':)') >= 0){
             $(this).text($(this).text().replace(':)','<img src="smile_emo.png">'));
          }
       });  
    }
  });
});

【讨论】：

=> 我通过 ajax（或其他方式）加载更多数据，另一种方式实际上是 iframe :) ,, iframe 代码看这个 -
然后 boot.dt_ar = function(obj){ $('body').append(obj.__html); } ,, 东西

【解决方案2】：

如果您要动态填充元素，则可以使用 .replace() JavaScript 函数预先设置其内容的格式。这是一个例子：

<!doctype html>
<html>
<head>
<script type='text/javascript'>     
$(document).ready(function () {
    $('#addNew').on('click', addNewElem);
});

function addNewElem() {
    var $newElem = $("<div> [no] do not do that! [yes] that is right! [smile]</div>"),
        smileys = {
            "[no]" : '<img src="http://www.freesmileys.org/smileys/smiley-basic/happyno.gif">',
            "[smile]" : '<img src="http://www.freesmileys.org/smileys/smiley-basic/baloon.gif" >',
            "[yes]" : '<img src="http://www.freesmileys.org/smileys/smiley-basic/happyyes.gif" >'
        };
    $.each(smileys, function(i,e){        
        var text = $newElem.html().replace(i,e);        
        $newElem.empty().html(text).appendTo('.container');
    });
} 
</script>        
</head>
<body>
  <button id="addNew">Add New Element</button>
  <div class="container"></div>      
</body>
</html>

JSFiddle

【讨论】：

[quote]意思是自动更改带有特定类的html元素的图像或情感的一些符号，那么我该如何实现呢？[/quote] - 这不是你的问题吗？ addNewElem 函数就是一个例子。不过，您应该为此付出一些。