使用Jquery将XML转换为HTML

Question

我是Jquery的一位新蜂，在此寻找帮助。这个问题很简单，但我解释得很详细，因为有多个项目我指的是实现我的目标

1）我用下面的jQuery插件，在我的网站http://tympanus.net/codrops/2011/12/14/item-blur-effect-with-css3-and-jquery/

这个插件使用modernizr.custom.34978.js和下面的JavaScript做模糊

$(function() { 

       var $container = $('#ib-container'), 
        $articles = $container.children('article'), 
        timeout; 

       $articles.on('mouseenter', function(event) { 

        var $article = $(this); 
        clearTimeout(timeout); 
        timeout = setTimeout(function() { 

         if($article.hasClass('active')) return false; 

         $articles.not($article.removeClass('blur').addClass('active')) 
           .removeClass('active') 
           .addClass('blur'); 

        }, 65); 

       }); 

       $container.on('mouseleave', function(event) { 

        clearTimeout(timeout); 
        $articles.removeClass('active blur'); 

       }); 

      }); 

2）以下HTML标记被用于此

<section class="ib-container" id="ib-container"> 
       <article> 
        <header> 
         <h3><a target="_blank" href="http://tympanus.net/codrops/2011/12/08/25-examples-of-perfect-color-combinations-in-web-design/">25 Examples of Perfect Color Combinations in Web Design</a></h3> 
         <span>December 8, 2011 by Gisele Muller</span> 
        </header> 
        <p>Today we will show you some examples of websites that are using beautiful and inspiring color combinations that match perfectly and create an eye candy...</p> 
       </article> 
</section> 

我想先走一步，使用TSQL自动生成的xml文件更新此html。这个想法是，当用户使用Web表单提交的细节，同样是使用存储过程中的XML转换，这是又是使用下面的jQuery

$(document).ready(function() 
{ 
    $.ajax({ 
    type: "GET", 
    url: "http://localhost:5732/js/ycube.xml", 
    dataType: "xml", 
    success: parseXml 
    }); 
}); 

function parseXml(xml) { 
    var list = $('#ib-container'); 

    $(xml).find("article").each(function (index, element) { 

     var field = $(element) 

     var link = field.find('a').text() 
     var span = field.find('span').text() 
     var para = field.find('p').text() 

     .append('<article><header><h3><a target="_blank" href="http://tympanus.net/codrops/2011/12/08/25-examples-of-perfect-color-combinations-in-web-design/">' + link + '</a></h3><span>'+span+ '</span></header><p>'+ para + '</p></article>') 

    ; 
    }) 
} 

转换HTML和这里是正在使用创建我的XML文件为SQLserver查询

?xml version="1.0" encoding="utf-8" ?> 
<sepx> 
     <article> 
        <header> 
         <h3><a target="_blank" href="http://tympanus.net/codrops/2011/12/08/25-examples-of-perfect-color-combinations-in-web-design/">25 Examples of Perfect Color Combinations in Web Design</a></h3> 
         <span>December 8, 2011 by Gisele Muller</span> 
        </header> 
        <p>Today we will show you some examples of websites that are using beautiful and inspiring color combinations that match perfectly and create an eye candy...</p> 
       </article> 
</sepx> 

我是成功的，直到为此，和html标签都充满了预期一旦jQuery是called.All主要的样式也应用于如预期，但模糊效果应来使用上述提到的jquery插件（参考第1项）没有发生。

当我手动放置html代码（参见第2项）时，插件按预期工作。

有人可以帮助我在这里了解为什么只有模糊效果不起作用，当我从XML中提取细节时，但手动放置HTML时效果不错。我已经在所有主流浏览器中尝试了这一点。

我再次想要重申一下我自学的Jquery和HTML，并且所有上面的代码snippts已经从多个地方获得并且被修改以适合我的需要。

Answer 1

在绑定mouseenter处理程序时，您通过AJAX调用检索的文章不存在。由于您无法将处理程序绑定到不存在的DOM对象，请使用委托（更好的做法），或在AJAX调用之后重新绑定处理程序（同样有效，但效率不高）。

代表团例如：

$container.on('mouseenter', 'article', function (event) { 
    var $article = $(this), 
     $articles = $article.siblings(); 
    clearTimeout(timeout); 
    timeout = setTimeout(function() { 
     if ($article.hasClass('active')) return false; 
     $articles.not($article.removeClass('blur').addClass('active')) 
      .removeClass('active') 
      .addClass('blur'); 
    }, 65); 
}); 

重新绑定例如：

$(document).ready(function() { 
    var bindMouseEnterHandler = function bindMouseEnterHandler() { 
      var $container = $('#ib-container'), 
       $articles = $container.children('article'), 
       timeout; 
      $articles.unbind('mouseenter').on('mouseenter', function (event) { 
       var $article = $(this); 
       clearTimeout(timeout); 
       timeout = setTimeout(function() { 
        if ($article.hasClass('active')) return false; 
        $articles.not($article.removeClass('blur').addClass('active')) 
         .removeClass('active') 
         .addClass('blur'); 
       }, 65); 
      }); 
      $container.on('mouseleave', function (event) { 
       clearTimeout(timeout); 
       $articles.removeClass('active blur'); 
      }); 
     }, 
     parseXml = function parseXml(xml) { 
      var list = $('#ib-container'); 
      $(xml).find("article").each(function (index, element) { 
       var field = $(element) 
       var link = field.find('a').text() 
       var span = field.find('span').text() 
       var para = field.find('p').text() 
       list.append('<article><header><h3><a target="_blank" href="http://tympanus.net/codrops/2011/12/08/25-examples-of-perfect-color-combinations-in-web-design/">' + link + '</a></h3><span>' + span + '</span></header><p>' + para + '</p></article>'); 
       bindMouseEnterHandler(); 
      }) 
     }; 
    $.ajax({ 
     type: "GET", 
     url: "http://localhost:5732/js/ycube.xml", 
     dataType: "xml", 
     success: parseXml 
    }); 
});