Question

我添加了一个用于文本输入的撤消按钮。当我点击撤消时，在点击事件之前更改事件。

有没有办法在更改之前触发click事件？因为我想撤消输入文本中的文本然后调用save方法。

＆＃13;

$('.btnUndo').click(function () {
  console.log("undo clicked.")
  var input = $(this).closest('.txtUndoable').find('input');
        $(input).val($(input).attr('data-old-value'));
  });

$('.txtUndoable').change(function () {
  console.log("Save method")

     // Save method 
 })

＆＃13;

.txtUndoable {
    position: relative;
  width:150px;
}

    .txtUndoable .fa {
        position: absolute;
        right: 0;
        padding: 10px;
        /*pointer-events: none;*/
        cursor: pointer;
        color:#26A8FF;
    }

.txtUndoable {
    padding-right: 30px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="txtUndoable">
   <i class="btnUndo fa fa-undo"></i>
   <input class="form-control" value="name" data-old-value="name">
</div>

＆＃13;

Answer 1

问题上的

js似乎会返回预期结果？不确定如何在元素不包含文本的情况下单击.btnUndo？

您可以在.off()处理程序中使用click，然后在change值更改后重新挂接input事件。请注意，html将id设置为txtUndoable

<div id="txtUndoable">

虽然javascript引用txtUndoable作为className

$('.txtUndoable')

＆＃13;

function changeHandler() {
  console.log("changeHandler")
    // Save method 
}

var txtUndoable = $(".txtUndoable");

$(function() {
  $(".btnUndo").click(function() {
    txtUndoable.off("change");
    var input = $(this).closest(".txtUndoable").find("input");
    input.val(input.attr("data-old-value"));
    txtUndoable.on("change", "input", changeHandler);
  });

  txtUndoable.change(changeHandler);
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="txtUndoable">
  <i class="btnUndo fa fa-undo">Undo</i>
  <input class="form-control" value="" data-old-value="abc">
</div>

＆＃13;

jQuery-为输入添加撤消按钮

1 个答案: