Question

我无法让我的按钮响应点击次数。我使用html（）方法生成了这个按钮：

var button1 = '<button class="btn btn-default" id="button1">Back</button>';
$(".component").html(button1);

此按钮在屏幕上呈现，但不起作用，单击时没有任何反应。

$("#button1 ").on('click',function(e){
        console.log("clicked");
});

手工插入的相同html代码（硬编码）工作正常。

Answer 1

您可能需要委托事件处理程序，但在这种情况下，只使用jQuery创建元素可以解决问题并且看起来更好。

＆＃13;

var button1 = $('<button />', {
  'class' : 'btn btn-default',
  id      : 'button1',
  text    : 'Back',
  on      : {
    click : function() {
      console.log('clicked');
    }
  }
});

$(".component").html(button1);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="component"></div>

＆＃13;

Answer 2

您应该将事件委托给加载DOM后创建的元素。

$(document).on('click','#button1',function(e){
        console.log("clicked");
}

Answer 3

这是因为当您的浏览器读取页面时，jquery会绑定您的点击事件。当您动态插入按钮时，它没有绑定事件。

您应该在注入按钮的代码之后放置绑定click事件的代码。或者将关于click事件的代码放在函数中，并在新注入的按钮需要处理click事件时调用它。

Answer 4

您的代码中存在一些错误。

按钮1后面有空格

$("#button1 ")

你在);函数之后已经onclick了。

有一个完美运行的代码

var button1 = '<button id="button1">Back</button>';
$(".component").append(button1);
$("#button1").on('click', function() {
  alert("clicked");
});

.component {
  width: 200px;
  height: 200px;
  border: solid 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="component">

</div>

最好使用.append()而不是.html()因为.html()会覆盖容器的整个html内容。

动态插入按钮不响应'onclick'

4 个答案: