时间戳

首页 > 解决方案 > jquery-edit-in-place动态传递参数

javascript - jquery-edit-in-place动态传递参数

问题描述

我使用 jquery 插件：https ://code.google.com/archive/p/jquery-in-place-editor/ 。在下一节中，我使用“JEIP”而不是全名。

我尝试通过 css 类将 JEIP 不绑定到 ID 而是绑定到许多对象。

<div class="jeip" id='key1' data-type='elephant'>Text 1</div>
<div class="jeip" id='key2' data-type='mouse'>Text 2</div>

现在我也想动态传递数据类型元素。我想出了“参数”选项来传递额外的数据。但它似乎不是动态的。

要初始化 JEIP，我使用：

    $(".editInPlace").editInPlace({
            url: "http://submitUrl/",
            params: "datatype="+$(this).data('type'),
            callback: function(){   
                 console.log( $(this).data('type') );
            },                
     }

但是参数是错误的。我只在接收提交操作的服务器脚本中得到 undifiend。当我使用回调函数时，我可以获得带有正确数据的控制台输出。如何将数据元素传递给服务器？

感谢帮助。

标签： javascriptjqueryedit-in-place

解决方案

假设所有元素在脚本执行时都已就位（即它们不会在以后动态添加），您可以简单地循环元素并使用适当的值调用 editInPlace 插件函数：

$('.editInPlace').each(function(i, el){
    var $el = $(el); // cache the jQuery object corresponding to the current element
    var dataType = $el.data('type');

    // call the editInPlace plugin directly on the element
    $el.editInPlace({
        url      : 'http://submitUrl/',
        params   : 'datatype=' + dataType,
        callback : function(){   
            console.log(dataType);
        }
    });
});

推荐阅读