双击为 table 设置文本

Question

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

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

查看我的fiddle：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() );
});

});

Answer 1

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

您可以使用 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() );
    });

});

Answer 2

试试这个

$( ".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() );
});

});

Krupesh Kotecha 也打败了我 ;)

Answer 3

试试这个

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

Answer 4

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

$( "#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() );
});

已更新 fiddle: https://jsfiddle.net/fvoufq07/6/

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

有几种方法可以解决此问题：在添加新的 .one() 回调之前使用 .off()，或者再次使用 .off()，但条件是使用 bootstap 的模式关闭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);
});

更新 fiddle 在 https://jsfiddle.net/fvoufq07/7/ 有一个例子。

双击为 table 设置文本

Set text for table with double click

javascript

jquery

jquery-events