Question

我有这个jQuery函数，我想允许它不止一次被点击。它只在第一次点击时工作。我应该改变什么？

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MessagesApp" ng-controller="MessagesController">
  <div class="personWrapper" ng-repeat="message in messages">
    <p>{{message}}</p>
  </div>
</div>

跨度

$(document.body).on('click', '.b', function () {
    var input = $('<input />', {
        'type': 'text',
        'name': 'unique',
        'value': $(this).html()
    });
    $(this).parent().append(input);
    $(this).remove();
    input.focus();
});

$(document).on('blur', 'input', function () {
    $(this).parent().append($('<span />').html($(this).val()));
    $(this).remove();
});

http://jsfiddle.net/hW3vk/89/

Answer 1

问题是因为您要从DOM中删除.b元素，而您替换它的新范围上没有b类：

$(document).on('click', '.b', function () {
    var $span = $(this);
    var $input = $('<input />', {
        'type': 'text',
        'name': 'unique',
        'value': $(this).html()
    });
    $span.parent().append($input);
    $span.remove();
    $input.focus();
}).on('blur', 'input', function () {
    var $label = $(this);
    $label.parent().append($('<span class="b" />').html($label.val())); // note class="b" here
    $label.remove();
});

Updated fiddle

允许jquery .on多次单击

1 个答案: