通过 jquery 具有属性的动态按钮

Dynamic buttons with attributes through jquery

本文关键字：动态 按钮 属性 jquery 通过      更新时间：2023-09-26

好的，我可以用表单代码生成一个按钮

var temp = "<button type='"button'" class='"dynBtn'" id='"anID'">Here!</button>";
$('#myDiv').append(temp).click(function(){
    window.alert("Hello! My id is " + this.id);
});

然后在运行时，这并没有真正起作用，因为我得到的 id 是"myDiv"的答案。另一方面，我也尝试使用这样的东西：

$('#myDiv').append(temp).click(dynButtonClicked(this));

其中 dynButtonClicked 单独定义为 

function dynButtonClicked (aButton) {
    window.alert("Hey, my id is " + aButton.id);    
};
但是，这样，在加载页面时单击按钮，

id是"未定义的"，此外，无论我单击该按钮多少次，我都不会收到进一步的警报(除了我在页面加载时收到的警报(。那么，我怎样才能做到这一点呢？

我想理想情况下，我想为运行时生成的所有按钮的类命名，然后在单击其中任何一个按钮以在 

$(document).ready(...)

功能。但是，请继续告诉我你的想法。事实上，稍后，通过交互，我可能想要删除按钮或禁用它们。所以，我正在寻找一些强大的东西。提前感谢您的时间。

以下是使用jQuery方式进行操作的方法：

var $button = $('<button/>', {
  type: 'button',
  'class': 'dynBtn',
  id: 'anID',
  text: 'Here!',
  click: function() {
    window.alert('Hello! My id is '+ this.id);
  }
});
$button.appendTo('#myDiv');

这是因为.append()不返回附加的元素，在这种情况下您可以使用.appendTo()：

$(temp).appendTo('#myDiv').on('click', function() {
    window.alert("Hello! My id is " + this.id);
});

如果要向 DOM 添加许多元素，最好改用事件委派。

$('#myDiv').on('click', '.appendedElement', fn);

使用 on((，这样做：

$(document).ready(function(){
  //in here you put the event for all elements with dynBtn class
  $(document).on("click",".dynBtn",function(){dynButtonClicked();});
});
function dynButtonClicked (aButton) {
    window.alert("Hey, my id is " + aButton.id);    
};
//and append the button anytime you want
var temp = "<button type='"button'" class='"dynBtn'" id='"anID'">Here!</button>";
$('#myDiv').append(temp);
相关文章：