Question

我的代码遇到了很多麻烦。这是一个由Django后端提供的模板。

{% load staticfiles %} 

<html>
    <head>
      {% csrf_token %}
        <title>Tempo</title>
        <link rel="stylesheet" type="text/css" href="{% static "css/styles.css" %}">
        <link rel="stylesheet" type="text/css" href="{% static "css/bootstrap.min.css" %}">
    </head>
    <body>
      <div id="header">
        <img id="logo" src="{% static "img/logo_wt.svg" %}"/>
      </div>
      {% csrf_token %}
      <form id="myform" action="/" method="POST" enctype="multipart/form-data">
        {% csrf_token %}
        <input type="file" name="csvFile" id='csv'>
        <input type="submit" value="Submit">
      </form>  
      <button class='firebutton'>Add buttons</button>

      <div class="fucking">{% autoescape off %}{{ data }}{% endautoescape %}</div>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
      <script src="http://johnny.github.io/jquery-sortable/js/jquery-sortable.js"></script>
      <script src="{% static "js/jquery-sortable.js" %}"></script>
         <script>
          $(document).ready(function(){
            $('td').on('click', function(){
              $(this).attr('contenteditable','true');
            })


            $('.firebutton').on('click', function(){
              $('tbody').find('tr').each(function(){
                $(this).append('<button type="button" id="remove" class="btn btn-default btn-lg good">' + 
                  '<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>' +
                  '</button>')
              })

            })

            $('#remove').on('click', function(){
              console.log("button clicked")
            })
        })
        </script>
    </body>
</html>

POST我的应用程序以html table回复。然后会发生什么呢？如果有人点击.firebutton我会在表格的每一行添加一个按钮，但标题除外。现在我想要做的是添加删除行的功能。我通过为每个新添加的按钮点击一个console.log来测试这个，但这不起作用。如果我把它放在.firebutton监听器的回调中，那么它可以工作，但只有一次。有谁知道这里发生了什么？

Answer 1

当您动态加载内容时，新创建的DOM元素不会附加事件，您必须从动态创建的元素或文档中委派事件：

$(document).on('click', '.firebutton', function() {

这样，您将事件附加到document而不是.firebutton元素，文档将委托事件到其范围内的每个.firebutton元素。

我建议不要从document委派，而是使用更接近的非动态父元素，这是因为性能。委托人越接近他们的孩子，jQuery就越快找到它而不评估整个DOM。

Answer 2

查看函数jQuery.on()。在jQuery(document).ready({ your stuff here });之后将对象添加到DOM时，他们将不会收听.click侦听器。一个基本的例子：

jQuery('.parentDiv').on('click', '.yourRow', function(){
   // Do whatever you like here
});

jQuery点击不触发按钮

2 个答案: