php - 创建元素在 jquery 1.8.3 中不起作用

Question

我已经使用 jquery 1.8.3 来动态创建元素。但它不适用于此。但它适用于 1.3.2 版本。下面是我为此使用的我的 Jquery 代码。

 $(document).ready(function(){

        var counter = 2;

        $("#addButton").click(function () {

        if(counter>10){
                alert("Only 10 textboxes allow");
                return false;
        }   

        var newTextBoxDiv = $(document.createElement('div'))
             .attr("id", 'CallBackDiv' + counter);

        newTextBoxDiv.after().html('<label>Call Back Date Time #'+ counter + ': </label>'+
              '<div class="controls"><input type="text" name="callback' + counter + 
              '" id="callback' + counter + '" value="" ></div>');

        newTextBoxDiv.appendTo("#control-group");


        counter++;
         });

         $("#removeButton").click(function () {
        if(counter==1){
              alert("No more textbox to remove");
              return false;
           }   

        counter--;

            $("#CallBackDiv" + counter).remove();

         });

         $("#getButtonValue").click(function () {

        var msg = '';
        for(i=1; i<counter; i++){
          msg += "\n CallBack #" + i + " : " + $('#callback' + i).val();
        }
              alert(msg);
         });
      });

---

<div id='control-group'>
    <div id="CallBackDiv1">
<label class="control-label" for="input01">
Call Back Date Time #1:</label><div class="controls">
<input type='textbox' id='callback1' ></div>
    </div>
</div>
<input type='button' value='+' id='addButton'>
<input type='button' value='-' id='removeButton'>

Answer 1

您创建div. 您的代码的问题是您使用了jQuery 的 after()函数。调用after()新创建的元素将返回null，然后您将调用该html()方法。我建议您阅读如何使用该after()功能-> http://api.jquery.com/after/

Answer 2

你为什么不用纯js做呢

var newTextBoxDiv = document.createElement('div');
newTextBoxDiv.setAttribute("id", 'CallBackDiv' + counter);

Answer 3

使用 jQuery，您可以像这样动态创建元素：

// Create a new div
var newTextBoxDiv = $('<div/>', {
    id: 'CallBackDiv' + counter
});    

// Append the new element to the DOM
newTextBoxDiv.appendTo("#control-group");

// You can check the console for the 'newTextBoxDiv' id
console.log(newTextBoxDiv.attr('id'));

// Then call the after part
newTextBoxDiv.after().html('...');

小提琴演示