输入文本和按钮字段在Firefox中不起作用

Question

我正在使用JQUERY小部件的某些应用程序上工作。 在该小部件中，有一些输入字段，例如文本，文本区域和按钮。 我只能通过TAB访问这些字段，但是直接用鼠标单击无法完成。 这个应用程式可以在Chrome上正常运作。 具有这些字段的简单html可以工作，但是当我在js文件中添加这些字段，然后在其他js文件中调用这些文件时，这些字段在Firefox中不起作用。

这是js文件：

var AddNewDepartment = "<br />\
<form>\
<table class='AddNewDepartment-table'>\
<tr>\
<td>\
Department Name:<span style='color: red'>*</span>&nbsp;\
<input type='text' name='departmentName' id='departmentName' class='expanded-input-text' />\
<input type='button' name='save' id='save' onclick='createDepartment()' Value='Save' class='newDepartment-submit' />\
<input type='button' name='cancel' Value='Cancel' class='newDepartment-submit'  />\
</td>\
</tr>\
</table>\
</form>\
";

请，我需要帮助来解决这个问题。

Answer 1

从您的帖子中看来，您是在将表单动态添加到DOM，即在页面加载之后。 在这种情况下，您需要为其进行委托事件处理。

您可以尝试使用.on() ，如下所示：

$(document).on('click', 'form AddNewDepartment-table input,form AddNewDepartment-table textarea', function() {

 // your code

});

对于委托事件处理， .on()的语法为：

$(StaticParent).on( eventName, targets, handlerFunction );

在这里， StaticParent表示不是动态的DOM元素，并且在页面加载时属于DOM。 eventName可能用空格分隔以用于多个事件绑定。