Как добавить выбранный плагин в динамически созданный/клонированный CSS div?

Плагин Chosen для jQuery (находится здесь: http://harvesthq.github.com/chosen/) добавляет дополнительную функциональность для выбора элементов HTML. Я могу добавить функциональность к исходным элементам, загруженным на страницу, с помощью следующего кода:

$(document).ready(function(){
$(".chosenProperties").data("placeholder","Select properties...").chosen();
$(".chosenType").data("placeholder","Type...").chosen();
$(".chosenInstance").data("placeholder","Instance...").chosen()

Это работает. Все три из этих классов элементов select появляются в div с именем #newGroup. На странице есть кнопка, которая «добавляет» новую группу, которая клонирует div #newGroup и добавляет его прямо под первым.

Он содержит те же элементы. Однако, когда я пытаюсь добавить функциональность Chosen к выбранным элементам в клонированном div, они зависают. Интерфейс выглядит так же, как и первый, поэтому Chosen загружается, но когда я нажимаю на них, ничего не происходит. Вот код:

    $( '#swl-add-group-button' ).click( function() {
    //addGroupToGUI();
    createClassAddRow();

} );


var rowNum = 0;     
function createClassAddRow() {
    rowNum++;
    newRow = jQuery('#newGroup').clone().css('display', '');
    newHTML = newRow.html().replace(/0/g, 1);
    newRow.initializeJSElements();
    newRow.html(newHTML);
    newRow.initializeJSElements();
    jQuery('#mainTable').append(newRow);
    addGroup(newRow);
}

jQuery.fn.initializeJSElements = function (){
    this.find(".chosenProperties").each( function() {
        alert('test');
        if($(".chosenProperties").data("placeholder", "Select properties...").chosen()){
            alert('test2');
        }
    });
    this.find(".chosenType").each( function() {
        jQuery(this).data("placeholder","Type...").chosen();
    });
    this.find(".chosenInstance").each( function(){
        jQuery(this).data("placeholder", "Instance...").chosen();
    })

}

Появляются оба предупреждения, test и test2. Итак, я думаю, что jQuery загружается, но по какой-то причине не работает. Кроме того, я не уверен, имеет ли это значение, но когда я наводил курсор на выбранные элементы клонированного div, он говорит javascript: void (1), тогда как при наведении курсора на оригинал он говорит javascript: void (0).


jquery css jquery-chosen
person dysruption    schedule 09.05.2012    source источник

Ответы (4)


arrow_upward
7
arrow_downward

Работа, которую я придумал, была похожа на работу Абхинава. Я удалил выбранный сгенерированный код. Убран класс "chzn-done" из поля выбора. Отключено отображение: нет в поле выбора, а затем повторно применен выбор к полю выбора

$j("#masterCats_chzn").remove();
$j("#masterCats").css({display: "inline-block"}).removeClass("chzn-done").addClass("chsn");
$j(".chsn").chosen();
person Patrick Barrett    schedule 07.12.2012

arrow_upward
1
arrow_downward

Глядя на выбранный исходный код, кажется, что вы не можете просто клонировать выборки, которые уже были chosen, так как у них уже есть набор классов chzn-done, а chosen применяется только к выборкам, для которых этот класс не установлен. Это означает, что ваш вызов chosen для нового выбора фактически ничего не делает.

Выбор отображается как включенный chosen, потому что вы клонируете всю группу. То есть после вызова clone новая группа уже содержит chosen интерфейс, а select уже скрыта. Конечно, интерфейс chosen в новой группе не привязан к новому select. Кроме того, нажатие на select ничего не меняет, потому что jQuery.clone по умолчанию не добавляет новых событий.

По сути, вы никогда не должны использовать jQuery.clone для клонирования сложного контента (или, точнее, вам вообще не следует клонировать сложный контент). Если вы хотите создать новую группу ввода с новым выбором с поддержкой chosen, просто сделайте это явно.

person penartur    schedule 24.05.2012
comment
Как лучше всего это сделать? Спасибо еще раз. - person dysruption; 17.06.2012
comment
Сделать это явно. То есть создать новый select, а затем применить к нему выбранный. - person penartur; 25.06.2012

arrow_upward
0
arrow_downward

Я только что наткнулся здесь из Google. Мысль ответит моим решением на основе .clone(). Вот что я делаю в своем проекте, чтобы использовать клон jquery и динамически применять к нему выбранный плагин:

html = '';
selectbox = $('#select-box').clone();
selectbox.removeAttr('id').attr({
    'data-placeholder': '(optional)'
}).removeClass('chzn-done').css('display','block');
html += selectbox.wrap('<p>').parent().html();

Отлично работает для меня. Удаление класса 'chzn-done' является обязательным шагом, иначе выбранный плагин не сможет активироваться на нем.

person Abhinav Singh    schedule 07.10.2012

arrow_upward
0
arrow_downward

это правда, что selected не работает для клонированного ввода. другой подход, чтобы заставить его работать

  clonedInput = $('#fullForm').clone;
    clonedInput.find('div.chzn-container').remove();
    clonedInput.find('selectBoX.withClass').show();
    clonedInput.find('selectBoX.withClass').removeAttr('id');
    clonedInput.find('selectBoX.withClass').removeAttr('data-placeholder');
    clonedInput.find('selectBoX.withClass').removeClass('chzn-done');
    clonedInput.find('selectBoX.withClass').chosen();
person Asif    schedule 13.11.2012