Javascript 如何定义附加div的方法和属性？

我将div动态附加到DOM中。我希望它们中的每一个都有一些方法，比如当我单击div内的按钮时，div将从DOM中删除；以及一些我可以从中读取的属性

所以我想我需要一个对象，但这让我困惑：

var block = tmpl('added_video_thumb', data);
$('#wrapper').append(block);

我希望块成为对象，所以我这样做：

var blocks = function(id, data){
  this.block = tmpl('added_video_thumb', data);
}

我将代码更改为：

var block = new blocks('added_video_thumb', data);
$('#wrapper').append(block);

然后我不知道如何定义该方法，我不想调用如下函数：

$('#delete').click(function(){
  block.remove();
})

我想要的是当我这样做时：

var block = new blocks();

---

它照顾一切。请帮助我构造此blocks对象。

您可以检查以下内容

HTML代码

<input type="text" placeholder="ID" id="id-input" />
<input type="text" placeholder="data" id="data-input" />
<button id="add-div">Add Div</button>

<div id="wrapper">

</div>​

$(function(){
    var block = function(id, data) {
        this.id = id;
        this.data = data;
        $("#wrapper").append('<div id="' + id + '">'+ data +'<br /> <button id="del-' + id + '">Delete Me!</button> </div>');
        $("#del-"+id).click(function() {
            $("#"+id).remove();

        });
    }

    $("#add-div").click(function() {
      var newBlock = new block($("#id-input").val(), $("#data-input").val());
    });

});​

添加Div
​

JS代码

<input type="text" placeholder="ID" id="id-input" />
<input type="text" placeholder="data" id="data-input" />
<button id="add-div">Add Div</button>

<div id="wrapper">

</div>​

$(function(){
    var block = function(id, data) {
        this.id = id;
        this.data = data;
        $("#wrapper").append('<div id="' + id + '">'+ data +'<br /> <button id="del-' + id + '">Delete Me!</button> </div>');
        $("#del-"+id).click(function() {
            $("#"+id).remove();

        });
    }

    $("#add-div").click(function() {
      var newBlock = new block($("#id-input").val(), $("#data-input").val());
    });

});​

$（函数（）{
变量块=函数（id、数据）{
this.id=id；
这个数据=数据；
$（“#包装器”）.append（“+data+”
Delete Me！'）；
$（“#del-”+id）。单击（函数（）{
$（“#”+id）.remove（）；
});
}
$（“#添加div”）。单击（函数（）{
var newBlock=new块（$（“#id输入”）.val（），$（“#数据输入”）.val（）；
});
});​

如果我理解您的问题，那就是您希望动态创建一个元素并将方法分配给它自己的子元素

HTML

<button id="add">Add</button>
<div class="container">
</div>

添加

JS

function addBlock() {

var div = $( '<div class="inner_div">
                 <button class="delete">Delete</button>
              </div>' );

div.children('button.delete').on( 'click', function() {
    $(this).parent().remove();
});


$('.container').append(div);
}

函数addBlock（）{
var div=$（'
删除
' );
div.children（'button.delete'）。在（'click'，function（）上{
$（this.parent（）.remove（）；
});
$（'.container'）.append（div）；
}

小提琴的例子：

---

​

是的，我想我混淆了var a=function（）{}和var a={}