Question

我正在尝试使用Jeditable作为内联编辑解决方案。

默认行为（单击要编辑的元素）效果很好，但我想通过单击另一个元素来激活元素。

例如，单击a.activateEdit将激活下一个div.edit（显然应该使用jQuery选择器完成）。

我为此研究过Jeditable docs，但找不到正确的语法

仅供参考，默认的Jeditable语法类似于：

 $(document).ready(function() {
     $('.edit').editable('http://www.example.com/save.php');
 });

*修改：找到a better solution *

Answer 1

上面的代码也不太正确。它会触发所有Jeditable实例上的click事件。

有很多方法可以做到这一点，这完全取决于您的HTML，但是例如，如果您有以下HTML：

<div class="edit" id="unique_id">Editable text</div> 
<a href="#" class="edit_trigger">Edit me!!</a>

然后您可以使用以下JavaScript：

/* Bind Jeditable instances to "edit" event. */
$(".edit").editable("http://www.example.com/save.php", {
    event     : "edit"
});
/* Find and trigger "edit" event on correct Jeditable instance. */
$(".edit_trigger").bind("click", function() {
    $(this).prev().trigger("edit");
});

Answer 2

您可以将此代码放在另一个元素的click函数中。例如：

HTML：

<a class="clickme">Click me to edit</a>
<div class="edit">Edit Me!</div>

jQuery的：

$(document).ready(function() {
$("a.clickme").click(function(){
     $('.edit').editable('http://www.example.com/save.php');
});
});

Answer 3

好的，Ata's answer并没有完全奏效，但确实让我走上了正确的道路：

$(document).ready(function() {
    $('.edit').editable('http://www.example.com/save.php');
    $("a.clickme").click(function(){
          $('.edit').click();
   });
});

Answer 4

我结合了前两个响应的强大功能来定位下一个可编辑元素，如下所示：

/* Find and trigger "edit" event on next Jeditable instance. */ $(".edit_trigger").livequery( 'click', function() { $(this).next().click(); });

Jeditable - 单击Y激活X的编辑

4 个答案: