使用jquery只保存一次自定义数据到dom元素

Saving custom data to dom elements using jquery only once

本文关键字：自定义 一次 数据 元素 dom jquery 保存 使用      更新时间：2023-09-26

我正在使用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");
    });
}

问题
    如你所见，我在加载时将数据附加到span元素上。但因为它是加载事件，我不会有内部的label和hidden fields。我只需要设置元素span上的数据一次，因为在drop event期间，我将访问标签和隐藏字段以更新控件的当前位置。我不想在label和hidden field的每个滴上query the dom，这是我的目的。
  1. 也给我关于如何在回发后重新绘制控件的想法?

删除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)
});
相关文章：