我正在尝试进行简单的单击以编辑页面的功能。除了单击和编辑多个事件时,大部分工作都有效。它总是希望通过新的点击再次发送先前的事件。这是代码:
$('.editable').click(function() {
var that = $(this);
if (that.find('input').length > 0) {
return;
}
var currentText = that.text();
var name = that.data('field');
var contact_id = that.closest('[data-id]').data('id');
console.log(contact_id);
console.log(that);
that.empty();
console.log(name);
var $input = $('<input>').val( $.trim(currentText))
.css({
'position': 'relative',
top: '0px',
//left: '0px',
width: that.width(),
height: that.height(),
opacity: 1,
padding: '15px',
'margin-bottom': '0'
});
$(this).append($input);
$(document).on('blur','.editable', function(){
that.text( $input.val());
console.log(contact_id);
console.log(name);
that.find('input').remove();
});
p.s你知道为什么on blur会让你需要在点击关闭之前点击两次元素吗?
<div class="large-12" id="reviewsNeeded--main" data-id="<?php echo $result['id']; ?>">
<div class="collapse">
<div class="reviewsNeededTable--name large-12 columns" style="margin-bottom: 10px;">
<div class="large-6 small-12 columns">
<div class="large-5 no-pad-left editable" id="name" data-field="name">
<?php echo $result['first_name'] . " " . $result['last_name']; ?>
</div>
<div class="large-5 no-pad-left editable" style="font-size: 0.80rem; margin-top: 5px; color: #6c22ca;"
data-field="company">
<?php echo get_term_by('id', $result['company'], 'publishers')->name; ?>
</div>
</div>
<div class="large-6 columns no-pad-left">
<div class="large-12">
<button class="delete-btn" data-id="<?php echo $result['id'] ?>">
Delete
</button>
</div>
<div style="clear:both; margin: 5px 0"></div>
<div class="large-12">
<a class="show--meta">
<button>Show More</button>
</a>
</div>
</div>
</div>
<div class="reviewsNeededTable--request large-3 columns">
</div>
</div>
</div>
答案 0 :(得分:3)
每次点击您都会在任意 .editable
上添加新的模糊处理程序,其中that
作用于当前上下文。听起来你想要改变:
$(document).on('blur','.editable', function(){
到
$(that).one('blur', function(){
这样它只会触发一次(.one
)并且仅触发当前输入。