Question

我正在尝试允许用户登录该网站，当他们点击特定元素时，该元素将更改为输入文本字段，然后允许用户在其中键入他们想要的内容。

但是，一旦我点击inout字段，它就会为另一个输入字段添加更多代码。这有意义吗？

这是我的jQuery：

$('.editTagline').click(function() {
  var content = $(this).html();
  $(this).html('<input type="text" value="' +content+ '">');    
});

这是JSFiddle：http://jsfiddle.net/nSY4Y/如果您单击单词标语，然后尝试在输入文本字段中输入文本，您将看到问题。

Answer 1

您可以使用one()，这样每个元素只能使用一次

$('.editTagline').one('click', function () {
    var content = $(this).html();
    $(this).html('<input type="text" value="' + content + '">');
});

FIDDLE

Answer 2

您可以使用off：

$('.editTagline').on('click', function () {
    var content = $(this).html();
    $(this).html('<input type="text" value="' + content + '">');
    $(this).off('click');
});

demo

Answer 3

替换内容后我会删除该类：

$(document).on("click", ".editTagline", function() {
  var content = $(this).html();
  $(this).html('<input type="text" value="">');
  $(this).find("input").val(content);
  $(this).removeClass("editTagline");
});

fiddle

即时编辑元素

3 个答案: