使用Jquery将XML转换为HTML

Question

I am a new bee to Jquery looking for some help here. The problem is pretty simple but i am explaining it in detail as there are multiple items I am referring to achieve my goal

1) I have used the following Jquery Plugin in my site http://tympanus.net/codrops/2011/12/14/item-blur-effect-with-css3-and-jquery/

This plugin use modernizr.custom.34978.js and following Javascript to do the blur

$(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) Following html tags are being used for this

<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>

I want to go one step ahead and update this html using xml file which is automatically generated using TSQL. The idea being, when a users submits details using web forms, the same is converted in xml using stored proc, which is turn is converted in html using following 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>')

    ;
    })
}

And here is my xml file which is created using SQLserver query

?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>

I am successful till this end, and the html tags are filled up as expected once jquery is called.All the major styles are also applied as expected, however the blur effect which should come using the above mentioned Jquery plugin (refer to bullet 1) is not happening.

When I manually place the html code (refer to bullet 2), the pluing is working as expected.

Can someone please help me here to understand why only blur effect is not working when I am pulling the details from XML, but the same works well when HTML is placed manually? I have tried this in all major browser.

I again want to reiterate the face that I am a self taught in Jquery and HTML and all the above code snippts have been taken from multiple places and altered to suit my need.

Answer 1

The articles you're retrieving via the AJAX call do not exist at the time you're binding the mouseenter handler. As you cannot bind a handler to a non-existent DOM object, either use delegation (the better practice), or rebind the handler after the AJAX call (just as effective, but not as efficient).

Delegation example:

$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);
});

Rebinding example:

$(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
    });
});