Javascript 如何更改动态生成的文本框的颜色

我在更改单击事件时动态生成的文本框的颜色方面遇到了困难。其想法是，如果用户希望更新文本框中的文本，则应更改文本框的颜色。 这是我的密码： 下面的代码实际上从数据库中获取数据并将其显示给用户

echo '<td>'.
     '<input type = "text" class="form-control" onclick="changeColor()" disabled = "disabled" 
     id ="'.$row["ID"].'"  name = "fieldText['.$row["ID"].
     ']" value = "'.$row["fieldText"].'">'."</td>";

我已经在上面一行中集成了这段代码，但是它给了我一个错误

错误：TypeError:无法设置未定义的属性“color”

---

更改事件处理程序以将当前上下文

this

发送到事件处理程序

onclick="changeColor(this)"

在JS中，使用元素上下文并设置其属性

function changeColor (el) {
    el.style.color = '#cc0000';
}

---

我建议使用类而不是设置内联样式

CSS:

JS:

---

由于jQuery包含在页面中，我建议使用它来绑定事件

$('input.form-control').on('click', function() {
    $(this).addClass('warning');
});

---

更改焦点上元素的颜色的步骤

input:focus, input:active {
    border-color: #c00;
}

---

首先为您的输入指定一个类，可能是

Txt1

如果要在

上执行此操作，请单击（）

剧本

$(document).ready(function() {

  $(document).on("click",".Txt1",function() {
   $(this).addClass('background');
 });

 $(document).on("blur",".Txt1",function() {
   $(this).removeClass('background');
 });

});

如果需要on focus（），请像这样更改代码

$(document).on("focus",".Txt1",function() {

以下是工作原理
您可以通过绑定到输入上的click事件并删除内联的
onClick（）

$('input').on('click', function(){

    $(this).css({ 'border': '1px solid black', 'background-color': 'white' });
})

通过使用“data-”属性，您可以隔离希望绑定到的输入


那你可以用

$(document).on('click', 'input[data="myattribute"]', function(){

    $(this).css({ 'border': '1px solid black', 'background-color': 'white' });
})

根据后续问题进行编辑

HTML

为了从动态生成的元素中获取事件，您需要将事件开始与文档对象绑定

e、 g

对于输入类型，根据需要使用模糊事件或单击事件

$(document).on("click/blur","input[type="text"],function(e){
    $(this).css({'color': '#cc0000});
}); 

事件如何绑定到动态生成的文本框上？是否要更改背景颜色或边框颜色？是否还要添加带有完整代码的错误描述？请显示您的错误。@NiranjanNRaju背景颜色或边框颜色都可以，只是希望用户知道您已开始编辑。你能帮助我建议添加类而不是设置内联样式吗？我会这样做，但这不是OP的问题：-/@AdamJeffers我可以问另一个问题吗，如果我必须在点击另一个按钮时删除此功能，比如说“更新”，我该怎么做，有什么方法可以将其设置为原始设置？我会用一些代码示例更新我的答案，但“删除此功能”是什么意思？你的意思是当你点击“更新”按钮时，所有的边框和背景颜色都会变回原来的颜色吗？谢谢你的回答，这是有效的，但我将另一个标记为正式答案，因为它与整个代码配合得很好，给了我灵活性。谢谢。@user4943236欢迎您！很高兴这有帮助。
$(document).ready(function() {

  $(document).on("click",".Txt1",function() {
   $(this).addClass('background');
 });

 $(document).on("blur",".Txt1",function() {
   $(this).removeClass('background');
 });

});

$(document).on("focus",".Txt1",function() {

$('input').on('click', function(){

    $(this).css({ 'border': '1px solid black', 'background-color': 'white' });
})

$(document).on('click', 'input[data="myattribute"]', function(){

    $(this).css({ 'border': '1px solid black', 'background-color': 'white' });
})

<button id="update">Update</button>

$('#update').on('click', function(){

    // Gets the input elements you're interested in
    var items = $(document).find('input[data="myattribute"]');
    // Loops through each jQuery object and you can apply whatever property values you want
    items.each(function(){
        $(this).css({ 'border': '1px solid blue', 'background-color': 'red' });
    });

});

$(document).on("click",".className or #id" ,function(e){
});

$(document).on("click/blur","input[type="text"],function(e){
    $(this).css({'color': '#cc0000});
});