jquery就地编辑动态传递参数

Question

我使用一个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>

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

要初始化JEIP，我使用：

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

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

谢谢你的帮助。

Answer 1

假设所有元素在脚本执行时都在适当的位置(即，它们在以后的某个时刻不会被动态添加(，您可以简单地循环这些元素，并使用适当的值调用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);
}
});
});