当用户单击 div 或其子元素时，更改动态添加的 div 元素的样式答案

【问题标题】：Change the style of a dynamically added div element when user clicks on the div or its children当用户单击 div 或其子元素时，更改动态添加的 div 元素的样式
【发布时间】：2017-05-02 23:03:08
【问题描述】：

我正在尝试更改特定 div 元素的样式，当用户单击它或其子元素之一时，我 .append() 将其添加到页面。这是我目前拥有的 JavaScript：

 var activeNote;

    $(".note").click(function () {
        activeNote = $(this);
        activeNote.css("border", "2px solid white");
    });

    $(".title, .reminder").click(function () {
        activeNote = $(this).parent();
        activeNote.css("border", "2px solid white");
    });

我附加到页面的字符串：

"<div class='note'><input type='text' placeholder='Title...' class='title' /><textarea name='text1' class='reminder' cols='40' rows='2' placeholder='Note...'></textarea></div>";

查看字符串的更好方法：

<div class="note">
     <input type="text" placeholder="Title..." class="title" />
     <textarea name="text1" class="reminder" cols="40" rows="2" placeholder="Note..."></textarea>
</div>

当我添加此代码并单击 div 元素时没有发生任何额外的事情，所以出现了问题。

提前感谢您的帮助。

【问题讨论】：

嗯，你的问题在你的标题中吗？您的标题应该描述问题，而不是回答问题。
如果我正确理解您的问题，当您点击.note 或其任一子项时，您想更改为.note？
是的，这正是我想做的。很抱歉有任何混淆。我编辑了问题。

标签： javascript jquery html css this

【解决方案1】：

在 jQuery 中，在事件处理程序中使用 this 总是引用正在接收事件的元素。要在.note 或其子项被点击时采取行动，您可以使用带有.on() 的事件委托：

 var activeNote;

    $("#note-container").on('click', '.note', function () {
        activeNote = $(this);
        activeNote.css("border", "2px solid white");
    });

#note-container {
  background: #cef;
  padding: 1em;
}

.note {
  margin: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="note-container">
  <div class="note">
       <input type="text" placeholder="Title..." class="title" />
       <textarea name="text1" class="reminder" cols="40" rows="2" placeholder="Note..."></textarea>
  </div>
</div>

【讨论】：

工作！非常感谢！

【解决方案2】：

如果动态添加.note元素，则需要更改绑定事件的方式

来自

$(".note").click(function () { ... });
$(".title, .reminder").click(function () { ... });

到

$(document).on('click', '.note', function () { ... });
$(document).on('click', '.title, .reminder', function () { ... })

这样，即使在定义事件处理程序之后插入到 DOM 的元素也将受制于事件处理程序。

js fiddle

【讨论】：

太棒了。非常感谢！