0

我将 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();

它照顾一切。请帮我构建这个块对象。

4

2 回答 2

1

您可以检查以下小提琴

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>​

JS代码

$(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());
    });

});​
于 2012-11-27T05:43:22.660 回答
1

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

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);
}

小提琴示例：http: //jsfiddle.net/wyXxn/1/ ​</p>

于 2012-11-27T06:06:02.113 回答