Question

编辑：这个问题类似于其他问题（由@ jonathan-lonowski评论），关于如何将事件处理程序附加到动态创建的元素。但是，我的问题是我在脚本执行期间没有察觉到事件处理程序如何一次绑定到特定元素的部分 - 而是我将事件处理程序视为监听所有事件，而与元素无关。不知道问题的根源，我也不知道要搜索的条件。回想起来，我看到其他问题也同样存在问题。

我很难理解为什么jQuery不会处理类导向事件，除非事件处理程序放在另一个事件处理程序中。

以下代码的灵感来自sololearn.com上的jQuery课程，但没有解释为什么click-on-remove-button事件处理程序放在click-on-add-button事件处理程序中。

当我尝试移动事件处理程序块以进行remove-button-class-click时，为了在事件处理程序块之前或之后站点添加按钮单击，单击一个删除按钮时没有响应。

我怀疑它无法工作，因为：这并没有引用正确的对象。但是通过试验alert（），在我看来：这是引用激活匿名函数的select-action上下文，而且我在根目录$（function（）{中放置的事件处理程序的位置无关紧要}）;子句。

也许我错过了一些明显的东西？我是jQuery的新手，但事件处理的逻辑对我来说似乎并不清楚。我去过的教程没有给我答案。谢谢！

HTML部分：

<html>
<head>
    <title>My To-Do List</title>
    <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
    <div width="500px">
        <h1>My To-Do List</h1>
        <p>
            <input id="value" type="text" placeholder="New Item" autofocus />
            <button type="button" id="btn_add" class="action" name="add_btn">Add</button>
        </p>
        <p>
            <ol id="my_list">
                <!-- list-items get dynamically added here -->
            </ol>
        </p>
    </div>
</body>
</html>

JS部分：

$(document).ready(function(){

$("#btn_add").on("click", function(){
    var val = $("#value").val();

    if (val !== "") {
        var new_e = $("<li></li>").text(val);
        $(new_e).append("<button class='rem' name='rem_btn'>X</button>");
        $("#my_list").append(new_e);
        $("#value").val("");

        $(".rem").on("click", function(){
            $(this).parent().remove();
        });

    }

});

});

Answer 1

对于任何DOM事件侦听器，我们必须指定该元素。因此，我们使用.ready来确保呈现DOM，并且我们将要呈现我们想要绑定事件的元素。

来到

但没有解释为什么点击删除按钮事件处理程序放在click-on-add-button事件处理程序中。

由于您的动态元素仅在click-on-add-button之后创建。因此，我们不会为不存在的DOM元素（click-on-remove-button）

编写事件处理程序

如果您不想写条件，请写下此

$(document).on("click", ".rem", function() {
  $(this).parent().remove();
});

这会将click听众绑定到.rem中的DOM元素。由于您要动态创建.rem元素，因此需要在文档上绑定该事件并特定选择器。

$(document).ready(function() {

  $("#btn_add").on("click", function() {
    var val = $("#value").val();

    if (val !== "") {
      var new_e = $("<li></li>").text(val);
      $(new_e).append("<button class='rem' name='rem_btn'>X</button>");
      $("#my_list").append(new_e);
      $("#value").val("");
    }

  });

});

$(document).on("click", ".rem", function() {
  $(this).parent().remove();
});

<html>

<head>
  <title>My To-Do List</title>
  <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>

<body>
  <div width="500px">
    <h1>My To-Do List</h1>
    <p>
      <input id="value" type="text" placeholder="New Item" autofocus />
      <button type="button" id="btn_add" class="action" name="add_btn">Add</button>
    </p>
    <p>
      <ol id="my_list">
        <!-- list-items get dynamically added here -->
      </ol>
    </p>
  </div>
</body>

</html>

你说你将'听众'绑定到元素澄清问题a 位。

让我用一个例子来解释

考虑 html

<a id="anchor">Element</a>

纯JavaScript：

function someListener(event){
  console.log(event.target); //prints anchor element
}

document.getElementById("anchor").addEventListener('click', someListener); //event listener binded to anchor element

使用Jquery：

$("#anchor").click(someListener); //same here binding click event listener for anchor element.

此处DOM元素为<a />，click事件的监听者为someListener。

如果我们在anchor中没有DOM元素，则会出现这两种情况。它引发了例外。因此，在为它绑定事件侦听器之前，请确保该元素存在于DOM中。

为什么jQuery不在另一个事件之外处理此事件？

1 个答案: