javascript - 添加涉及 PHP 的 onclick jQuery 输入

Question

我正在尝试编写一个脚本，该脚本将使用 jQuery/javascript 在单击时添加输入。

但是它不起作用，我也不知道为什么。即使 console.log() 也没有显示任何内容。

我不是 jQuery 大师，但我认为它应该可以工作。

这是我的代码

        <div id="wrap_inputs">
        <?php for($i = 1; $i <= $pocet; $i++) { ?>
          <div class="span2" id="span_group<?= $i; ?>">
            <label class="control-label" style="display: inline-block; font-size: 11px;"> <?= LANG_CAN_BE_LEFT_OUT; ?></label>
            <input type="checkbox" name="can_be_left_out[<?= $i; ?>]">
            <input class="span2 m-wrap" name="word[<?= $i; ?>]" type="text" placeholder="<?= LANG_WORD; ?> <?= $i; ?>" style="border: 1px solid black;">
            <input class="span2 m-wrap" name="replace[<?= $i; ?>][1]" type="text" id="n<?= $i; ?>_n_slovo" placeholder="<?= LANG_WORDREPLACE; ?>">
            <input class="span2 m-wrap" name="replace[<?= $i; ?>][2]" type="text" id="n<?= $i; ?>_n_slovo" placeholder="<?= LANG_WORDREPLACE; ?>">
            <input class="span2 m-wrap" name="replace[<?= $i; ?>][3]" type="text" id="n<?= $i; ?>_n_slovo" placeholder="<?= LANG_WORDREPLACE; ?>">
            <input class="span2 m-wrap" name="replace[<?= $i; ?>][4]" type="text" id="n<?= $i; ?>_n_slovo" placeholder="<?= LANG_WORDREPLACE; ?>">
            <input class="span2 m-wrap" name="replace[<?= $i; ?>][5]" type="text" id="n<?= $i; ?>_n_slovo" placeholder="<?= LANG_WORDREPLACE; ?>">
          </div>
        <?php } ?>
        </div>

这是我的 JavaScript 代码

    $(document).ready(function(){

  var counter = <?= $pocet; ?>;

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

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

      span2_group.after().html('<label class="control-label" style="display: inline-block; font-size: 11px;"><?= LANG_CAN_BE_LEFT_OUT; ?>' +
        '<input type="checkbox" name="can_be_left_out[' + counter + ']">' +
        '<input class="span2 m-wrap" name="word[' + counter + ']" type="text" placeholder="<?= LANG_WORD; ?> ' + counter + '" style="border: 1px solid black;">' +
        '<input class="span2 m-wrap" name="replace[' + counter + '][1]" type="text" id="n' + counter + '_n_slovo" placeholder="<?= LANG_WORDREPLACE; ?>">' +
        '<input class="span2 m-wrap" name="replace[' + counter + '][2]" type="text" id="n' + counter + '_n_slovo" placeholder="<?= LANG_WORDREPLACE; ?>">' +
        '<input class="span2 m-wrap" name="replace[' + counter + '][3]" type="text" id="n' + counter + '_n_slovo" placeholder="<?= LANG_WORDREPLACE; ?>">' +
        '<input class="span2 m-wrap" name="replace[' + counter + '][4]" type="text" id="n' + counter + '_n_slovo" placeholder="<?= LANG_WORDREPLACE; ?>">' +
        '<input class="span2 m-wrap" name="replace[' + counter + '][5]" type="text" id="n' + counter + '_n_slovo" placeholder="<?= LANG_WORDREPLACE; ?>">'
      );

      span2_group.appendTo("#wrap_inputs");


      counter++;
  });

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

    counter--;

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

});

变量 $pocet 是通过 $_POST[] 发送的第一步输入的数量。

Answer 1

......

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

  // PUT IT IN THE DOM HERE
  span2_group.appendTo("#wrap_inputs");

  // NOW it is in the DOM, you can call after()
  span2_group.after().html('<label class="control-label" style="display: inline-block; font-size: 11px;"><?= LANG_CAN_BE_LEFT_OUT; ?>' +
    '<input type="checkbox" name="can_be_left_out[' + counter + ']">' +
    '<input class="span2 m-wrap" name="word[' + counter + ']" type="text" placeholder="<?= LANG_WORD; ?> ' + counter + '" style="border: 1px solid black;">' +
    '<input class="span2 m-wrap" name="replace[' + counter + '][1]" type="text" id="n' + counter + '_n_slovo" placeholder="<?= LANG_WORDREPLACE; ?>">' +
    '<input class="span2 m-wrap" name="replace[' + counter + '][2]" type="text" id="n' + counter + '_n_slovo" placeholder="<?= LANG_WORDREPLACE; ?>">' +
    '<input class="span2 m-wrap" name="replace[' + counter + '][3]" type="text" id="n' + counter + '_n_slovo" placeholder="<?= LANG_WORDREPLACE; ?>">' +
    '<input class="span2 m-wrap" name="replace[' + counter + '][4]" type="text" id="n' + counter + '_n_slovo" placeholder="<?= LANG_WORDREPLACE; ?>">' +
    '<input class="span2 m-wrap" name="replace[' + counter + '][5]" type="text" id="n' + counter + '_n_slovo" placeholder="<?= LANG_WORDREPLACE; ?>">'
  );

……