输入文本和按钮字段在 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 可以为多个事件绑定使用空格分隔。