0

我想动态创建一个 div，然后在该 div 中创建一个标签和输入，然后将事件处理程序（使用 jQuery 的 $.on() 函数）分配给输入元素。什么是创建元素和分配事件的好方法？我正在使用最新版本的 jQuery。谢谢！

4

2 回答 2

2 
var
$div = $('<div/>', { 'class': 'myclass', click: function(){ ... } }),
$label = ...,
$input = ...

$div.append($label.add($input)).insertAfter('#el')
于 2012-08-01T02:36:48.863 回答
1

我已经完成了上述解决方案的完整解决方案，这里是演示链接：

演示： http ://codebins.com/bin/4ldqp91

HTML

<div id="panel">
  <input type="button" id="btnadd" name="btnadd" value="Add Div" />
  <input type="button" id="btnreset" name="btnreset" value="Reset" />
  <br/>
</div>

** CSS：**

input[type=button]{
  border:1px solid #2233fd;
  background:#2288cb;
  margin-bottom:10px;
}
input[type=button]:hover{
  background:#22abde;
}
.mydiv{
  border:1px solid #2255aa;
  padding:5px;
  margin-bottom:7px;
  font-size:13px;
  background:#2275bd;
}
.mydiv input{
  border:1px solid #333;
}
.mydiv label{
  color:#fdf889;
}
.val{
  display:inline-block;
  margin-left:8px;
  color:#bcfaac;
}

jQuery：

$(function() {
    var i = 0;
    $("#btnadd").click(function() {
        if ($("#panel").find("div.mydiv").length) {
            i = $("#panel").find("div.mydiv").length;
        }
        $("#panel").append("<div id='div-" + i + "' class='mydiv'></div>");

        $("div.mydiv:last").append("<label>Enter Value:</label>");
        $("div.mydiv:last").append("<input type='text' name='txt" + i + "' id='txt" + i + "' size='20'/><span class='val'></span>");

        //bind Blur Event
        $("div.mydiv:last").find("input[type=text]").on('blur', function() {
            if ($(this).val() != "") {
                $(this).parents(".mydiv").find("span.val").html("This Input Contains Value: \"" + $.trim($(this).val()) + "\"");
            } else {
                $(this).parents(".mydiv").find("span.val").html("This Input has been left empty..!");
            }

        });

        i++;

    });
   //Reset List
    $("#btnreset").click(function() {
        $("div.mydiv", $("#panel")).remove();
    });
});

将事件与元素绑定的另一种替代方法如下：

首先，您必须制作要绑定的功能。

function bindTextbox(){
   if ($(this).val() != "") {
                    $(this).parents(".mydiv").find("span.val").html("This Input Contains Value: \"" + $.trim($(this).val()) + "\"");
                } else {
                    $(this).parents(".mydiv").find("span.val").html("This Input has been left empty..!");
                }
}

在上面的jQuery脚本上的注释//bind Blur Event下面写下面的行脚本

$("div.mydiv:last").find("input[type=text]").bind('blur','bindTextbox');

而不是以下代码行：

 $("div.mydiv:last").find("input[type=text]").on('blur', function() {
     if ($(this).val() != "") {
                    $(this).parents(".mydiv").find("span.val").html("This Input Contains Value: \"" + $.trim($(this).val()) + "\"");
      } else {
                    $(this).parents(".mydiv").find("span.val").html("This Input has been left empty..!");
      }
 });

演示： http ://codebins.com/bin/4ldqp91

于 2012-08-01T11:51:32.867 回答