Question

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

Answer 1

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

$div.append($label.add($input)).insertAfter('#el')

Answer 2

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

演示： 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脚本上绑定Blur事件

$("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

使用输入和标签创建嵌套div的最佳方法是什么，然后在输入上分配事件？

2 个答案: