javascript - 当用户点击 div 或其子元素时更改动态添加的 div 元素的样式

Question

我正在尝试更改特定 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 元素时，没有发生任何额外的事情，所以出了点问题。

在此先感谢您的帮助。

Answer 1

在 jQuery 中，在事件处理程序中使用 this 总是引用接收事件的元素。要在 .note 或它的子项被单击时执行操作，您可以将事件委托(delegate)与 .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>