jQuery没有't将CSS添加到附加的输入中

jQuery doesn't add CSS to appended input

本文关键字：输入 添加 CSS 没有 jQuery      更新时间：2023-09-26

问题是jQuery没有将CSS添加到附加的输入中。我还创建了演示http://jsfiddle.net/heY2u/

HTML:

<div id='container'></div>
<input type="text" value="Test1">

JS:

$('input, textarea, select').on('focusin', function () {
    $(this).data('holder', $(this).attr('placeholder'));
    $(this).attr('placeholder', '');
    $(this).css('outline', '#F78181 solid 1px');
});
$('input, textarea, select').on('focusout', function () {
    $(this).attr('placeholder', $(this).data('holder'));
    $(this).css('outline', '');
});
$('<input type = "text" value = "Test2">').appendTo('#container');
alert(123);

您需要放置以下行：

$('<input type = "text" value = "Test2">').appendTo('#container');

在其他jQuery之前。它之所以失败，是因为您使用的语法只会将代码应用于DOM中已经存在的元素。因此，您需要先将元素添加到DOM中，然后应用其他代码。

jsFiddle示例

或者，使用.on（）的委派语法，如：

$(document).on('focusin', 'input, textarea, select', function () {

这将允许您将事件绑定到DOM中已经存在的任何元素，以及以后动态添加的任何元素

来自文档：

事件处理程序仅绑定到当前选定的元素；他们必须在代码调用.on（）时存在于页面上。为确保元素存在并且可以选择，请执行事件中元素的文档就绪处理程序内部的绑定页面上的HTML标记。如果新的HTML正在被注入到页面中，选择元素并在生成新HTML后附加事件处理程序放置到页面中。

jsFiddle示例

相关文章：