Question

我有一个包含动态数据和静态按钮的div部分。

HTML：

<div class="main">
    <div class="subSection">                    
    <section>
    <button type="button"  class="btn btn-danger hideEquipmentDetails" onclick="clickme()"><i class="fa fa-times" ></i></button>
    </section>
    </div>
</div>

SCRIPT：

<script>
details()
    function details(){
    var details= response.data.filters;
        $.each(details,function(i,value){
        $('.subSection').append('<section><label>Speed</label><label>'+value.speed+'</label></section>');
    });
    }

function clickme(){
$('.main').hide();
}
</script>

单击按钮时，单击此功能可正常工作。

我每5秒刷新一次方法。因此我需要在加载方法时清除.subSection之前的html内容。所以我决定动态添加一个按钮。

我改变了我的代码：

HTML:

    <div class="main">
        <div class="subSection">                    
        </div>
    </div>

SCRIPT:

    <script>
    details()
        function details(){
        $('subSection').html('');
        var details= response.data.filters;
            $.each(details,function(i,value){
            $('.subSection').append('<section><label>Speed</label><label>'+value.speed+'</label></section>');
        });
     $('.subSection').append('<section><button type="button"  class="btn 
   btn-danger hideEquipmentDetails" onclick="clickme()"><i class="fa fa-
   times" ></i></button>
        </section>')
        }

    function clickme(){
    $('.main').hide();
    }
    </script>

但现在没有触发clickme方法。我也尝试使用.click。我的代码中有什么问题吗？

Answer 1

.on()适用于动态创建的元素，如果使用以下语法：

$(document).on('click', '<selector>', function() {});

$(document).on('click', '.hideEquipmentDetails', function() { 
  $('.main').hide();
});

Answer 2

显然，动态添加html时不使用onclick属性。

将代码更改为此应该有效：

$('.subSection').append('<section><button type="button" class="btn '+
  'btn-danger hideEquipmentDetails"><i class="fa fa-times"></i>'+
  '</button></section>').find('button').click(clickme)

Answer 3

在<body>标记内移动特定的函数声明，它将自动生成动态创建的按钮。

<script>
  function clickme(){
  alert("test");
  $('.main').hide();
 }
</script>
<div class="main">
   <div class="subSection">                    
   </div>
</div>

代码段

details();

        function details(){
        $('subSection').html('');
        /*var details= response.data.filters;
            $.each(details,function(i,value){
            $('.subSection').append('<section><label>Speed</label><label>'+value.speed+'</label></section>');
        });*/
     $('.subSection').append('<section><button type="button" class="btn btn-danger hideEquipmentDetails" onClick="clickme()"><i class="fa fa-times" ></i>TEST</button></section>');
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
      function clickme(){
      alert("test");
      $('.main').hide();
     }
    </script>
   <div class="main">
       <h1>Test Content</h1>
        <div class="subSection">                    
        </div>
    </div>

Answer 4

var count=0;
$(document).ready(function(){
  
  $("#add_button").click(function(){
    count+=1;
    $(".container").append('<button>Button '+count+'</button>');
  })

  $(".container").on('click', 'button', function(){
    alert("Button " + $(this).html() + " clicked");
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.container{padding:10px}
.container button{padding:3px; margin:5px; border: solid 1px red;}
</style>

<button id="add_button">Add</button>

<div class="container">
</div>

Answer 5

感谢所有人提出了很好的想法，我通过对代码进行简单的更改来解决问题。

 function details(){
        $('subSection').html('');
        $('.subSection').append('<section><button type="button"  class="btn  btn-danger hideEquipmentDetails" onclick="clickme()"><i class="fa fa-
   times" ></i></button>
        </section>')
        var details= response.data.filters;
            $.each(details,function(i,value){
            $('.subSection').append('<section><label>Speed</label><label>'+value.speed+'</label></section>');
        });
        }

首先添加按钮然后附加数据。

onclick不适用于动态添加的按钮

5 个答案: