jquery-就地编辑动态传递参数

Question

我使用 jquery-插件：https://code.google.com/archive/p/jquery-in-place-editor/ .在接下来的部分中，我使用 "JEIP" 而不是全名。

我尝试通过 css class 将 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') );
            },                
     }

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

感谢您的帮助。

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);
        }
    });
});

jquery-就地编辑动态传递参数

jquery-edit-in-place pass dynamically parameter

javascript

jquery

edit-in-place