javascript - 入力とラベルの両方でネストされた div を作成し、入力にイベントを割り当てる最良の方法は何ですか?

Question

動的に div を作成し、その div 内にラベルと入力を作成し、(jQuery の $.on() 関数を使用して) イベント ハンドラーを入力要素に割り当てます。要素を作成してイベントを割り当てるにはどうすればよいでしょうか? 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