双击设置表格的文本

Set text for table with double click

本文关键字：文本 表格 设置 双击      更新时间：2023-09-26

我有几个表，其中包含 ajax 加载的内容。有时我必须在将td的内容导出为 PDF 之前手动更改它的内容，所以我认为最好的方法是使用 jQuery 的 .dblclick()双击为每个td创建一个触发器。触发器将打开一个带有input字段的模式，并在提交模态时更改双击td的文本。

这有效，但是当我更改第二个、第三个等td的内容时，每个先前单击的td也会获得新值。

检查我的小提琴：https://jsfiddle.net/fvoufq07/

到目前为止我的代码：

$( ".sitename" ).dblclick( function() {
    var sitename = $( this );
    $( "#msgBox .modal-title" ).html("Change sitename");
    $( "#msgBox .modal-body" ).html("Enter new sitename:<input type='"text'" id='"new_sitename'">");
    $( "#msgBox" ).modal("show");
    $( "#msgBox button.btn" ).click( function() {
    sitename.text( $( "#new_sitename" ).val().trim() );
});
});

这是因为您为模态重复使用相同的按钮。因此，每次打开模态时，您都会在按钮上添加新的侦听器，但不会杀死前一个侦听器。

您可以使用以下off以下命令杀死以前的侦听器：

$( ".sitename" ).dblclick( function() {
    var sitename = $( this );
    $( "#msgBox .modal-title" ).html("Change sitename");
    $( "#msgBox .modal-body" ).html("Enter new sitename:<input type='"text'" id='"new_sitename'">");
    $( "#msgBox" ).modal("show");
    $( "#msgBox button.btn" ).off('click').click( function() {
        sitename.text( $( "#new_sitename" ).val().trim() );
    });
});

您看到的问题是您添加到按钮的点击功能

$( "#msgBox button.btn" ).click( function() {
    sitename.text( $( "#new_sitename" ).val().trim() );
});

未删除。因此，每次重新打开模型时，您都会更改任何以前单击的.sitename以及新单击的文本。

为了避免这种情况，你应该删除点击事件，或者最好使用 jQuery 的 .one() 函数，该函数只会在触发事件的第一个实例上触发回调：

$( "#msgBox button.btn" ).one('click', function() {
    sitename.text( $( "#new_sitename" ).val().trim() );
});

更新的小提琴：https://jsfiddle.net/fvoufq07/6/

更新：上述解决方案无法解决打开模式然后在不单击"关闭"保存按钮的情况下关闭的问题。

有几种方法可以解决此问题：在添加新的.one()回调之前使用 .off()，或者再次使用 .off() ，但有条件地使用 boottap 的 hidden.bs.modal 触发器进行模式关闭。

$( "#msgBox" ).one('hidden.bs.modal', function() {
    $( "#msgBox button.btn" ).off('click');
});

您可能还希望将'click'侦听器分配给变量，以便可以专门删除该侦听器，如果同一元素上有其他'click'侦听器，这将非常有用。

var updateText = $( "#msgBox button.btn" ).one('click', function() {
    ...
});
$( "#msgBox" ).one('hidden.bs.modal', function() {
    $( "#msgBox button.btn" ).off('click', updateText);
});

更新的小提琴在 https://jsfiddle.net/fvoufq07/7/有一个示例。

试试这个

var sitename;
$( ".sitename" ).dblclick( function() {
    sitename = $(this);
    $( "#msgBox .modal-title" ).html("Change sitename ");
    $( "#msgBox .modal-body" ).html("Enter new sitename:<input type='"text'" id='"new_sitename'">");
    $( "#msgBox" ).modal("show");
});
$( "#msgBox button.btn" ).click( function() {
        $(sitename).text( $( "#new_sitename" ).val().trim() );
    });

这是更新的JSFIDDLE

试试这个

$( ".sitename" ).dblclick( function() {
sitename = $( this );
$( "#msgBox .modal-title" ).html("Change sitename");
$( "#msgBox .modal-body" ).html("Enter new sitename:<input type='"text'" id='"new_sitename'">");
$( "#msgBox" ).modal("show");
$( "#msgBox button.btn" ).click( function() {
    sitename.text( $( "#new_sitename" ).val().trim() );
});

}(;

克鲁佩什·科特查也打败了我，;)

相关文章：