Question

SETUP 我正在使用Chosen插件（http://harvesthq.github.com/chosen/）和使用relCopy脚本克隆

问题我可以成功克隆行，但“max_selected_options”之类的选项不会传递给克隆行。请告诉我我做错了什么？

HTML代码

<label>Select Options</label>
<select data-placeholder="You may select upto Two options" name="Opt_1" id="Opt_1" class="chosen-select" multiple tabindex="6" style="width: 280px; ">
<option value=""></option>
    <optgroup label="NFC EAST">
        <option>Dallas Cowboys</option>
        <option>New York Giants</option>
        <option>Philadelphia Eagles</option>
        <option>Washington Redskins</option>
    </optgroup>
    <optgroup label="NFC NORTH">
        <option>Chicago Bears</option>
        <option>Detroit Lions</option>
        <option>Green Bay Packers</option>
        <option>Minnesota Vikings</option>
    </optgroup>
</select>

<p><a href="#" class="copy" rel=".addMoreFiles">Add More</a></p>

JS档案

/**
 * jQuery-Plugin "relCopy"
 * 
 * @version: 1.1.0, 25.02.2010
 * 
 * @author: Andres Vidal
 *          code@andresvidal.com
 *          http://www.andresvidal.com
 *
 * Instructions: Call $(selector).relCopy(options) on an element with a jQuery type selector 
 * defined in the attribute "rel" tag. This defines the DOM element to copy.
 * @example: $('a.copy').relCopy({limit: 5}); // <a href="example.com" class="copy" rel=".phone">Copy Phone</a>
 *
 * @param: string   excludeSelector - A jQuery selector used to exclude an element and its children
 * @param: integer  limit - The number of allowed copies. Default: 0 is unlimited
 * @param: string   append - HTML to attach at the end of each copy. Default: remove link
 * @param: string   copyClass - A class to attach to each copy
 * @param: boolean  clearInputs - Option to clear each copies text input fields or textarea
 * 
 */

(function($) {

    $.fn.relCopy = function(options) {
        var settings = jQuery.extend({
            excludeSelector: ".exclude",
            emptySelector: ".empty",
            copyClass: "copy",
            append: '',
            clearInputs: true,
            limit: 0 // 0 = unlimited
        }, options);

        settings.limit = parseInt(settings.limit);

        // loop each element
        this.each(function() {

            // set click action
            $(this).click(function(){
                var rel = $(this).attr('rel'); // rel in jquery selector format             
                var counter = $(rel).length;

                // stop limit
                if (settings.limit != 0 && counter >= settings.limit){
                    return false;
                };

                var master = $(rel+":first");
                var parent = $(master).parent();                        
                var clone = $(master).clone(true).addClass(settings.copyClass+counter).append(settings.append);

                //Remove Elements with excludeSelector
                if (settings.excludeSelector){
                    $(clone).find(settings.excludeSelector).remove();
                };

                //Empty Elements with emptySelector
                if (settings.emptySelector){
                    $(clone).find(settings.emptySelector).empty();
                };                              

                // Increment Clone IDs
                if ( $(clone).attr('id') ){
                    var newid = $(clone).attr('id') + (counter +1);
                    $(clone).attr('id', newid);
                };

                // Increment Clone Children IDs
                $(clone).find('[id]').each(function(){
                    var newid = $(this).attr('id') + (counter +1);
                    $(this).attr('id', newid);
                });

                //Clear Inputs/Textarea
                if (settings.clearInputs){
                    $(clone).find(':input').each(function(){
                        var type = $(this).attr('type');
                        switch(type)
                        {
                            case "button":
                                break;
                            case "reset":
                                break;
                            case "submit":
                                break;
                            case "checkbox":
                                $(this).attr('checked', '');
                                break;
                            default:
                              $(this).val("");
                        }
                         if ($(this).hasClass('chosen-select')) {

                            $(this).next('.chosen-container').remove();

                            $(this).css({display: "inline-block"}).removeClass("chosen-done");
                            var that = $(this);

                            setTimeout(function(){ that.removeData('chosen').chosen();},0);                       

                        }

                    });                 
                };

                $(parent).find(rel+':last').after(clone);

                return false;

            }); // end click action

        }); //end each loop

        return this; // return to jQuery
    };

})(jQuery);


$(function(){
var removeLink = ' <a class="remove" href="#" onclick="$(this).parent().slideUp(function(){ $(this).remove() }); return false">remove</a>';
$('a.copy').relCopy({append: removeLink});
});

$(document).ready(function(){
    $(".chosen-select-deselect").chosen({allow_single_deselect:true});
    $(".chosen-select").chosen({max_selected_options: 2});
    $(".chosen-select").bind("chosen:maxselected", function () { alert("Maximum limit reached"); });
    $(".chosen-select").trigger('chosen:activate'); 
    });

Answer 1

我认为事件不会分配给新克隆的元素，即使在克隆方法中指定了“true”属性。

无论如何，这是一个快速的解决办法，以确保始终附加事件。

新小提琴：http://jsfiddle.net/KjNb5/4/

Old Fiddle：http://jsfiddle.net/KjNb5/1/

HTML

<div class="more-files-template hidden">
    <label>Select Options</label>
    <select data-placeholder="You may select upto Two options" multiple tabindex="6" style="width: 280px; ">
        <option value=""></option>
        <optgroup label="NFC EAST">
            <option>Dallas Cowboys</option>
            <option>New York Giants</option>
            <option>Philadelphia Eagles</option>
            <option>Washington Redskins</option>
        </optgroup>
        <optgroup label="NFC NORTH">
            <option>Chicago Bears</option>
            <option>Detroit Lions</option>
            <option>Green Bay Packers</option>
            <option>Minnesota Vikings</option>
        </optgroup>
    </select> <a class="remove" href="#">remove</a>

</div>
<form id="form" action="/" method="post">
    <div class="files"></div>
</form>
<p><a href="#" class="copy-link">Add More</a>
</p>
<p><a href="#" class="form-submit-button">Submit form</a>
</p>

JS

$( main );

function main() {

    var fieldNumber = 0;
    var fieldNameAndID = "Opt_";
    var maxFieldsAllowed = 5;

    addField(fieldNumber);

    $(".copy-link").on("click", function (e) {
        e.preventDefault();

        addField(fieldNumber);
    });

    $(".files").on("click", "a", function (e) {
        e.preventDefault();

        fieldNumber = fieldNumber - 1;

        $(this)
            .parent()
            .slideUp(function () {
            $(this).remove();
        });
    });

    $(".form-submit-button").on("click", function (e) {
        e.preventDefault();

        alert($("#form").serialize());
    });


    function addField(index) {

        fieldNumber = index + 1;

        if (fieldNumber > maxFieldsAllowed) {
            fieldNumber = fieldNumber - 1;
            alert("Sorry! cannot add more than " + maxFieldsAllowed + " fields.");
            return false;
        }

        var newFieldNameAndID = fieldNameAndID + fieldNumber;

        var $new = $(".more-files-template")
            .clone(true)
            .removeClass("more-files-template hidden")
            .addClass("another-field");

        if (fieldNumber == 1) {
            $new.find(".remove").remove();
        }

        $(".files").append($new);

        $new.find("select")
            .attr({
            name: newFieldNameAndID,
            id: newFieldNameAndID
        })
            .chosen({
            max_selected_options: 2
        })
            .bind("chosen:maxselected", function () {
            alert("Maximum limit reached");
        });
    }

};

CSS

.hidden {
    display:none; /* to hide template */
}

这不是完美的，但会让你朝着正确的方向前进：）

希望有所帮助。

Varinder

选择的插件选项不会传递给克隆行

1 个答案: