0

我是 Jquery 的新手，在这里寻求帮助。问题很简单，但我正在详细解释它，因为我指的是多个项目来实现我的目标

1) 我在我的网站http://tympanus.net/codrops/2011/12/14/item-blur-effect-with-css3-and-jquery/中使用了以下 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 将其转换为 html

$(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>')

    ;
    })
}

这是我使用 SQLserver 查询创建的 xml 文件

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

到此为止我是成功的，一旦调用 jquery，html 标记就会按预期填充。所有主要样式也按预期应用，但是使用上述 Jquery 插件应该出现的模糊效果（请参阅项目符号 1）没有发生。

当我手动放置 html 代码（请参阅项目符号 2）时，连接按预期工作。

有人可以在这里帮助我理解为什么当我从 XML 中提取细节时只有模糊效果不起作用，但是当手动放置 HTML 时同样有效？我在所有主流浏览器中都试过这个。

我再次想重申我是 Jquery 和 HTML 自学成才的面孔，上面所有的代码片段都是从多个地方获取的，并根据我的需要进行了更改。

4

1 回答 1

1

您通过 AJAX 调用检索的文章在您绑定mouseenter处理程序时不存在。由于您无法将处理程序绑定到不存在的 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
    });
});
于 2013-10-04T12:20:56.203 回答