Сохранение пользовательских данных в dom-элементах с помощью jquery только один раз - PullRequest
Новая
       46

Сохранение пользовательских данных в dom-элементах с помощью jquery только один раз

0 голосов
/ 07 октября 2011

Я создаю динамические элементы управления, используя jQuery, читая параметр строки запроса.Эти элементы управления можно перетаскивать, чтобы аккуратно их расположить, после события перетаскивания при перетаскивании я обновлял бы положение и состояние элемента управления через скрытое поле.Просто моя реализация теперь обновляет данные при каждом отбрасывании, что нехорошо.Я также сделал это через событие, но не сработало

Текущая реализация 

/*Create controls when only query string exists*/
if (config.params) {
    //parse the query string json as a object
    //ex:{type:"textbox",x:100,y:200,label:Name}
    var params = $.parseJSON(config.params);

    //for each control in json add it to document body
    $(params).each(function (idx, obj) {
        var id = new Date();//for generating dynamic id
        id = id.getTime();
        $("<span>").addClass(obj.css).load(function (ev) {
            var a = this;
            $(a).data("keys", {
                key: $("label", a).text()**certainly label wont be found**,
                value: $("input[name]:hidden", a)
            });
        }).
        easydrag().ondrop(function (e, el) {
            //easydrag drag drop plugin
            var a = $(el),
                b = a.data("keys"),
                key = b.key,
                value = b.value;
            value.val(key + "$" + e.pageX + "$" + e.pageY);
        }).
        css({
            position: "absolute",
            top: obj.y,
            left: obj.x
        }).
        append($("<label>", {
            "for": id
        }).
         html(obj.label).
         append(config.ELEMENTS(obj.type).attr("id", id))).
         append($("<input>", {
            "type": "hidden",
            "name": "CONTROL$POSITION",
            "id": "control_position_" + idx
         })).
        appendTo("form");
    });
}

Вопрос

  1. Как вы видите, я прикрепляю данные к элементу span под нагрузкой.Но так как это событие загрузки, у меня не будет внутренних label и hidden fields.Мне нужно установить данные для элемента span только один раз, поскольку во время drop event я получу доступ к метке и скрытому полю, чтобы обновить текущую позицию элемента управления.Я не хочу query the dom на каждую каплю для label и hidden field, что является моей целью.
  2. Также дайте мне идеи о том, как я могу перерисовать элементы управления послепостбэк?

1 Ответ

1 голос
/ 07 октября 2011

Избавьтесь от load и временно сохраните ссылку на элемент. Выполните код после того, как элемент полностью завершил создание: 

var span = $("<span>");
span.addClass(obj.css).
    easydrag(). //et cetera
    ....
    appendTo("form");

//After the element has finished:
$(span).data("keys", {
    key: $("label", span).text(),
    value: $("input[name]:hidden", span)
});
...