0

我有一些 javascript 将更改应用到某些元素和加载更多此类元素的函数。像那样：

<ol id="test"><li>click</li></ol>
<script type="text/javascript">
    $(function() {
        $('OL').delegate("li","click",function(){
        $('#test').append('<li>click</li>');
    });
</script>

这是委托的基本功能，它可以工作。我可以点击多个<li>元素。

问题是我想，additonaly做以下：

$(function() {
    $('li').css('color','red'); 
    //this is just an example, I don't need to paint the text red :)
});

对于所有li不仅仅是在页面加载时加载的那些。

我无法将这些更改附加到任何内容（没有事件表明我已经加载了上面附加中的元素）。此外，我知道$('li').css('color','red');每次调用 append 时我都能回忆起（或在 ajax 回调上，这是我真正正在工作的事情）。但是我有一个系统，其中包含许多返回不同 HTML 的 ajax 调用以及需要针对这些元素执行的大量插件和 jquery 人员。我不想在每次 ajax 成功时调用一个巨大的“刷新”函数。

现在我找到的唯一解决方案是将所有内容绑定到任意事件，并在每个 ajax 加载时对该事件进行触发调用，如下所示：

<ol id="test"><li>click</li></ol>
<script type="text/javascript">
    $(function() {
        $('OL').delegate("li","click",function(){
            $('#test').append('<li>click</li>');
            $('#test').children().trigger('load');
        });
</script>       
<script type="text/javascript">
    $(function() {
        $('OL').delegate("li","load",function(){
            $(this).css('color','red');
        });
    });
</script>

这适用于第一个加载后的所有元素。所以我需要一些额外的代码，但它可以工作。

有人有更好的解决方案吗？有什么方法可以为非活动进行“现场直播”？

谢谢！

编辑 关于代码中的“红色”示例......我需要做的更改是许多其他更改：

('BODY').delegate(".mcs_container","load",function(){
        $(this).mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"auto","no","no",0);
    }).trigger('load');

所以我认为只有触发一个功能才会起作用。

编辑 2 我在这里创建了一个工作示例：http: //jsfiddle.net/THHNS/5/ 我想要完成的是能够避免额外的触发器$('LI').trigger('focus');

编辑 3 我在 ON 应该足够和更好的时候使用委托。更新示例：http: //jsfiddle.net/THHNS/26/

4

4 回答 4

0

你可以这样做：

<head>
    <script type="text/javascript">
        $(function() {
            $(document).on("click","li", function(){
                $('#test li:first-child').clone().appendTo('#test');
            });
        });
    </script>
</head>
<body>
<ol id="test"><li style="color:red">click</li></ol>
</body>
于 2012-06-25T11:22:45.787 回答
0

定义一个类不是更好吗？

.myredclass {color: red;}

并将其添加到 LI 的创建中：

$('#test').append('<li class=\"myredclass\">click</li>');

我敢打赌它会快得多。

显然，这取决于您的 css 样式必须有多动态（如果您想为每个 LI 设置不同的 x 偏移量，这不是一个可行的方案，但对于简单且一致的样式，您可以这样做）。

于 2012-06-25T08:46:27.920 回答
0

好吧，似乎不可能将实时函数调用附加到不是事件的东西上。我发现的最佳解决方案如下。

<head>
<script type="text/javascript">
    $(function() {
        $(document).on("click","li", function(){
            //this click simulates an ajax call
            //the html appendend is generated and can have a lot of elements that need javascript work

            //this simmulates the html append
            $('#test').append('<li>click</li>');

            //in my proposed solution the function that attachs the HTML will recur all children of the attached element and trigger a custom event
            $('#test').children().trigger("myLoaded");
        });

        //all jquery functions that usually are called like:
        //$('LI').css('color','red');
        //are called inside the focus event
        //this functions could be anywhere and I don't need to know them prior to the ajax load        
        $(document).on("myLoaded","li", function(){             
            $(this).css('color','red');
        }); //(note 1)

        //Trigger the custom event once to paint red the first element
        $('LI').trigger('myLoaded'); //(note 2)
    });
</script>
</head>
<body>
<ol id="test"><li>click</li></ol>
</body>

你可以在这里试试。

http://jsfiddle.net/THHNS/33/

@charlietfl 建议可以将（注 2）中的触发器链接到（注 1）中的声明，但我无法使其工作。我相信无论如何都可以用更少的线来完成。但我想这个解决方案足以让我的代码组织在我正在工作的一页完整 ajax 加载项目中。

谢谢大家！

于 2012-06-25T11:49:43.637 回答
0

这不会解决你所有的困境，但是一旦你创建了一个自定义事件，你也可以在同一个链中立即触发它，允许你对插件进行简单的设置，在页面加载时激活并准备好在 ajax 成功中使用

   $('OL').delegate("li","load",function(){
        $(this).css('color','red');
    }).trigger('load');
于 2012-06-25T09:39:49.820 回答