Question

我试图在用户点击它或其中一个子元素时，将我.append（）的特定div元素的样式更改为该页面。这是我到目前为止的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

如果您动态添加-vm /usr/lib/jvm/java-8-oracle/jre/bin元素，则需要更改绑定事件的方式

这

.note

要

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

这样，即使在事件处理程序之后插入到DOM 中的元素也会受到事件处理程序的约束。

js fiddle

Answer 2

在jQuery中，在事件处理程序中使用this始终引用接收事件的元素。要在点击它或它的孩子时对.note采取行动，您可以使用.on()使用事件委派：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

2 个答案: