удаление div из сортируемого jquery - PullRequest
Новая
       14

удаление div из сортируемого jquery

2 голосов
/ 11 января 2010

Я разработал пользовательский интерфейс "Google-Maps-like" для своей интрасети, где пользователи могут добавлять шаги к рассчитанным маршрутам и расстояниям. Я использую сортируемые div s, чтобы изменить порядок шагов. Теперь я хочу удалить шаги, но мой код JavaScript / jQuery вообще не работает. Вы можете мне помочь?

Мой код JQuery: 

$(document).ready(function() {
        $("#sortable").sortable();
        $("#sortable").disableSelection();
});



    function addStep() {
        var temp = $('.template').clone();
        $(temp).removeClass("template");
        $(temp).addClass("sort");
        $('#sortable').append(temp);

    }
    function removeStep() {

        $(this).closest('div.sort').remove();
        $("#sortable").sortable('refresh');
    }

И мой HTML: 

//template to add new step
 <div class="template">
        <input type="text" name="addressN" value="" class="address" />
        <input type="button" class="remove" value="Remove" onclick="removeStep();" />
    </div>
//sortable list of step
    <div id="sortable">
        <div class="sort">
            <input type="text" name="Start" value="" class="address" />
        </div>
        <div class="sort">
            <input type="text" name="End" value="" class="address" />
        </div>
    </div>
    <input type="submit" value="Get Route!" onclick="showLocation(); return false;" />
    <input type="submit" value="Add Step" onclick="addStep(); return false;" />

Заранее спасибо!

1 Ответ

4 голосов
/ 11 января 2010

Что-то не так с вашей функцией addStep(). Я постараюсь объяснить, добавив несколько комментариев к вашему исходному коду: 

function addStep() {
 // Here, you store a reference to the jQuery Object containing the clone in the var temp.
 var temp = $('.template').clone();
 // Here, you wrap temp (which already is a jQuery Object) inside $().
 // Fix: replace '$(temp)' by 'temp'
 $(temp).removeClass('template');
 $(temp).addClass('sort');
 $('#sortable').append(temp);
}

После исправления этого, плюс некоторые дополнительные оптимизации, это становится: 

function addStep() {
 $('.template').clone().removeClass('template').addClass('sort').appendTo('#sortable');
}

Кроме того, ваша removeStep() функция неправильно использует this. Вы, вероятно, хотите сделать следующее: 

$.fn.removeStep = function() {
 // `this` is now a reference to the jQuery Object on which `.removeStep()` was invoked 
 this.closest('div.sort').remove();
 $('#sortable').sortable('refresh');
 // Allow chaining
 return this;
}

Теперь вы можете опустить onclick="removeStep();" из вашего HTML-шаблона и использовать что-то подобное в jQuery: 

$('.remove').live('click', function() {
 $(this).removeStep();
}
...