javascript – jQuery：双击设置表格的文本

我有几个带有ajax加载内容的表.有时我必须在将其导出为PDF之前手动更改td的内容,因此我认为最好的方法是使用jQuery的.dblclick()双击为每个td创建一个触发器.触发器将打开一个带有输入字段的模态,并在提交模态时更改双击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() );
    });

});

标签：jquery,javascript,javascript-events,jquery-events
来源： https://codeday.me/bug/20190713/1453587.html