Question

我有一些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');（或者是我正在工作的ajax回调）。但是我有一个带有很多ajax调用的系统，它返回不同的HTML以及需要针对这些元素执行的大量插件和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>

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

有没有人有更好的解决方案？任何方式为非事件做“现场”？

谢谢！

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

('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/

Answer 1

定义一个班级不是更好吗？

.myredclass {color: red;}

并在创建LI时添加它：

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

我打赌它会更快。

显然这取决于你的css样式必须是多么动态（如果你想为每个LI设置一个不同的x偏移它不是一个可行的解决方案，但是对于简单和一致的方法你可能会这样做。）

Answer 2

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

   $('OL').delegate("li","load",function(){
        $(this).css('color','red');
    }).trigger('load');

Answer 3

你可以这样做：

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

Answer 4

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

<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加载项目中保持工作。

感谢所有人！

代表附加非事件

4 个答案: