Livequery和每个()

时间:2011-05-04 19:43:41

标签: javascript livequery each

我有一个.each()循环在所有匹配元素上执行某些操作。但我也有办法添加这些元素....我试图让livequery意识到已经添加了一个新元素并通过相同的每个循环运行它。

这是一般设置: http://jsfiddle.net/CUURF/1/

基本上,我如何使用livequery和各自一起?

最终我可以在metaboxes中动态添加tinymce编辑器文本框,但我相当确定问题是我的ID不会在add / clone上自动创建,因为新元素不在DOM中每个循环。

编辑 - 我认为最重要的是我需要标准w / .each的索引计数器才能使用livequery吗?

编辑 - 这是wpalchemy用于循环/克隆的代码

/* <![CDATA[ */
        jQuery(function($)
        {
            $(document).click(function(e)
            {       
                var elem = $(e.target);

                if (elem.attr('class') && elem.filter('[class*=dodelete]').length)
                {
                    e.preventDefault();

                    var p = elem.parents('.postbox'); /*wp*/

                    var the_name = elem.attr('class').match(/dodelete-([a-zA-Z0-9_-]*)/i);

                    the_name = (the_name && the_name[1]) ? the_name[1] : null ;

                    /* todo: expose and allow editing of this message */
                    if (confirm('This action can not be undone, are you sure?'))
                    {
                        if (the_name)
                        {
                            $('.wpa_group-'+ the_name, p).not('.tocopy').remove();
                        }
                        else
                        {
                            elem.parents('.wpa_group').remove();
                        }

                        the_name = elem.parents('.wpa_group').attr('class').match(/wpa_group-([a-zA-Z0-9_-]*)/i)[1];

                        checkLoopLimit(the_name);

                        $.wpalchemy.trigger('wpa_delete');
                    }
                }
            });

            $('[class*=docopy-]').click(function(e)
            {
                e.preventDefault();

                var p = $(this).parents('.postbox'); /*wp*/

                var the_name = $(this).attr('class').match(/docopy-([a-zA-Z0-9_-]*)/i)[1];

                var the_group = $('.wpa_group-'+ the_name +':first.tocopy', p);

                var the_clone = the_group.clone().removeClass('tocopy');

                var the_props = ['name', 'id', 'for'];

                the_group.find('input, textarea, select, button, label').each(function(i,elem)
                {
                    for (var j = 0; j < the_props.length; j++)
                    {
                        var the_prop = $(elem).attr(the_props[j]);

                        if (the_prop)
                        {
                            var the_match = the_prop.match(/\[(\d+)\]/i);

                            if (the_match)
                            {
                                the_prop = the_prop.replace(the_match[0],'['+(+the_match[1]+1)+']');

                                $(elem).attr(the_props[j], the_prop);
                            }
                        }
                    }
                });

                if ($(this).hasClass('ontop'))
                {
                    $('.wpa_group-'+ the_name +':first', p).before(the_clone);
                }
                else
                {
                    the_group.before(the_clone);
                }

                checkLoopLimit(the_name);

                $.wpalchemy.trigger('wpa_copy', [the_clone]);
            });

            function checkLoopLimit(name)
            {
                var elem = $('.docopy-' + name);

                var the_match = $('.wpa_loop-' + name).attr('class').match(/wpa_loop_limit-([0-9]*)/i);

                if (the_match)
                {
                    var the_limit = the_match[1];

                    if ($('.wpa_group-' + name).not('.wpa_group.tocopy').length >= the_limit)
                    {
                        elem.hide();
                    }
                    else
                    {
                        elem.show();
                    }
                }
            }

            /* do an initial limit check, show or hide buttons */
            $('[class*=docopy-]').each(function()
            {
                var the_name = $(this).attr('class').match(/docopy-([a-zA-Z0-9_-]*)/i)[1];

                checkLoopLimit(the_name);
            });
        });
        /* ]]> */
        </script> 

以及我的metabox内部的标记:

<div id="testimonials"> 

    <h2>Testimonials</h2> 

    <a style="float:right; margin:0 10px;" href="#" class="dodelete-testimonials button"><span class="icon delete"></span>Remove All</a> 


        <div id="wpa_loop-testimonials" class="wpa_loop wpa_loop-testimonials"><div class="wpa_group wpa_group-testimonials first">   



        <a href="#" class="dodelete button"><span class="icon delete"></span>Remove</a> 

      <div class="slide_preview"> 
                <div class="preview_wrap"> 
        <img class="preview" src="" alt="preview" /> 
        </div> 
        <input type="hidden" name="_sidebar_meta[testimonials][0][testimonial_image]" value="" class="img_src" /> 


                <input type="hidden" name="_sidebar_meta[testimonials][0][slide_image_alt]" value="" class="img_alt" /> 


        <button class="upload_image_button button" type="button"><span class="icon upload"></span>Change Photo</button> 

      </div> 

      <div class="slide_text"> 

        <label>About Testimonial</label> 
        <div class="customEditor minimal"> 
                <textarea rows="5" cols="50" name="_sidebar_meta[testimonials][0][testimonial_desc]">I realized it was ME causing all the problems</textarea> 
        </div> 
      </div> 


    </div>      <div class="wpa_group wpa_group-testimonials last tocopy">    

    <h3 class="slide">Testimonial Name:     
            <input type="text" name="_sidebar_meta[testimonials][1][testimonial_name]" value=""  /> 
    </h3> 

        <a href="#" class="dodelete button"><span class="icon delete"></span>Remove</a> 

      <div class="slide_preview"> 
                <div class="preview_wrap"> 
        <img class="preview" src="http://localhost/multi/wp-content/themes/callingintheone/functions/WPAlchemy/images/default_preview.png" alt="_sidebar_meta[testimonials][1][testimonial_image] Preview" /> 
        </div> 
        <input type="hidden" name="_sidebar_meta[testimonials][1][testimonial_image]" value="" class="img_src" /> 


                <input type="hidden" name="_sidebar_meta[testimonials][1][slide_image_alt]" value="" class="img_alt" /> 


        <button class="upload_image_button button" type="button"><span class="icon upload"></span>Upload Photo</button> 

      </div> 

      <div class="slide_text"> 

        <label>About Testimonial</label> 
        <div class="customEditor minimal"> 
                <textarea rows="5" cols="50" name="_sidebar_meta[testimonials][1][testimonial_desc]"></textarea> 
        </div> 
      </div> 


    </div></div>     
    <p style="margin-bottom:15px; padding-top:5px;"><a href="#" class="docopy-testimonials button"><span class="icon add"></span>Add Testimonial</a></p>    

</div>

.tocopy类被炼金术代码转移到新的隐藏(通过CSS)和最后一个元素

2 个答案:

答案 0 :(得分:1)

你的问题是每个人都没有使用clik执行。在那之后,没有任何东西可以让它运行。

fixed code

答案 1 :(得分:0)

答案:http://jsfiddle.net/morrison/CUURF/6/

备注:

  • 不使用livequery。在这种情况下没有必要。
  • 跟踪数组中的现有编辑器。每次需要编辑器时,这比在DOM中循环更快。 DOM的东西很慢,数组很快。这也使您可以轻松访问任何或所有编辑器,以了解您可能做的其他事情。
  • 创建新编辑器时不循环。它只是修改新编辑器,使其具有最后一个加1的ID。这是一个巨大的性能提升。