Как вы используете предыдущий брат на динамически добавляемом контенте? - PullRequest
Новая
       13

Как вы используете предыдущий брат на динамически добавляемом контенте?

1 голос
/ 12 октября 2010

Я пытаюсь динамически добавлять элементы в аккордеон. Каждый добавленный элемент содержит форму с переключателями в стиле Пользовательские элементы формы . Вот код, который я использую для добавления элемента в аккордеон. 

$("#addpage").click(function(){
  $.get("addpage.php", function(data){
    $(data).insertAfter(".accordion div#[id^=element]:last");
  });
  $(".accordion").accordion('destroy');
  callAccordion();
});

Код добавляется без проблем, однако, аккордеон никогда не завершается, а кнопки не стилизуются. Ошибка говорит Uncaught TypeError: Невозможно прочитать свойство 'style' из null. Когда я убираю переключатель, гармошка работает без проблем.

Вот код для вызова Аккордеона 

function callAccordion(){
$(".accordion").accordion({
   active: false,
   autoheight: false,
   collapsible: true,
   alwaysOpen: false,
   header: '> div >h3'
   }).sortable({
    axis: "y",
    handle: "h3",
    stop: function(event, ui){
    stop = true;
    },
        update: function(event, ui){
    var result = $(".accordion").sortable('toArray');
    stop = true;
    $.ajax({
    type: 'post',
    data: "element=" + result,
    url: 'modules/updatepageorder.php',
    success: function(data){
       if(data != "true"){
         alert("Unable to update page order!");
            }
    }
     });
   }
 });
 }

1 Ответ

1 голос
/ 12 октября 2010

Поместите код аккордеона в обратный вызов. 

$("#addpage").click(function(){
  $.get("addpage.php", function(data){
  $(data).insertAfter(".accordion div#[id^=element]:last");
  $(".accordion").accordion('destroy');
  callAccordion();
    });
});

в противном случае он вызывается до того, как вызов ajax добавляет новую форму в аккордеон .. ( это происходит потому, что вызов ajax .get() является асинхронным )

Конкретная ошибка, о которой вы упомянули, может быть вызвана тем, что происходит внутри метода callAccordion(), который мы не можем увидеть ... так что ничего не поделаешь, пока вы не опубликуете код этого тоже ..

[Update]

Я создал небольшое обновление для плагина ( не проверено ), которое может удовлетворить ваши потребности .. 

update: function() {

        var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
        for(a = 0; a < inputs.length; a++) {
            if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") {
                if((!inputs[a].previousSibling) || (inputs[a].previousSibling && inputs[a].previousSibling.className != inputs[a].type)){
                    span[a] = document.createElement("span");
                    span[a].className = inputs[a].type;

                    if(inputs[a].checked == true) {
                        if(inputs[a].type == "checkbox") {
                            position = "0 -" + (checkboxHeight*2) + "px";
                            span[a].style.backgroundPosition = position;
                        } else {
                            position = "0 -" + (radioHeight*2) + "px";
                            span[a].style.backgroundPosition = position;
                        }
                    }
                    inputs[a].parentNode.insertBefore(span[a], inputs[a]);
                    inputs[a].onchange = Custom.clear;
                    if(!inputs[a].getAttribute("disabled")) {
                        span[a].onmousedown = Custom.pushed;
                        span[a].onmouseup = Custom.check;
                    } else {
                        span[a].className = span[a].className += " disabled";
                    }
                }
            }
        }
},

Добавьте этот метод в плагин и вызовите Custom.update() сразу после вставки нового содержимого на вашу страницу, сразу после $(data).insertAfter(".accordion div#[id^=element]:last");

...