javascript - 动态添加输入字段，但字段由外部 PHP 函数生成

Question

这个问题看起来像是重复的，但我真的找不到类似的东西。 事情在这里工作，但在这里不是动态的:

    var counter = 0;
function addInput(divName){
      var newdiv = document.createElement('div');
      newdiv.innerHTML = "Member " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";
      document.getElementById(divName).appendChild(newdiv);
      counter++;
 }

但在这里我稍微改变一下:

    var counter = 0;
function addInput(divName){
      var newdiv = document.createElement('div');
      newdiv.innerHTML = "Member " + (counter + 1) + addmore();
      document.getElementById(divName).appendChild(newdiv);
      counter++;
 }

所以，这里的新函数 addmore() 返回由 AJAX 帮助调用的外部 PHP 代码生成的字段..

函数addmore();是这样的:

addmore(){
        $jd.ajax({
          url: "<?php echo JURI::root(); ?>",
          type: "POST",
          data: {'option':'com_joomd', 'view':'itempanel', 'task':'loadfields', 'typeid':<?php echo $this->cparams->typeid; ?>, 'catid[]':checked, 'id':<?php echo (int)$this->item->id; ?>, "<?php echo jutility::getToken(); ?>":1, 'abase':1},
          beforeSend: function()    {
            $jd(".poploadingbox").show();
          },
          complete: function()  {
            $jd(".poploadingbox").hide();
          },
          success: function(res)    {
          
                $jd('#fieldtable_id').html(res);
          },
          error: function() {
              alert('error');                 
          }
    });
}

显然，$jd('#fieldtable_id').html(res); 部分正在执行实际工作，但我无法使用它在这里动态引入新字段。

请指导我。

Answer 1

您的函数 addmore() 没有返回任何内容，因为

1. 您的函数中没有返回“值”
2. 您正在使用 $jd.ajax() 进行异步调用

你应该这样做:

var counter = 0;
function addInput(divName){
      addmore(divName);
}

和:

function addmore(divName){
        $jd.ajax({
          url: "<?php echo JURI::root(); ?>",
          type: "POST",
          data: {'option':'com_joomd', 'view':'itempanel', 'task':'loadfields', 'typeid':<?php echo $this->cparams->typeid; ?>, 'catid[]':checked, 'id':<?php echo (int)$this->item-        id; ?>, "<?php echo jutility::getToken(); ?>":1, 'abase':1},
          beforeSend: function()    {
            $jd(".poploadingbox").show();
          },
          complete: function()  {
            $jd(".poploadingbox").hide();
          },
          success: function(res)    {
             var newdiv = document.createElement('div');
             newdiv.innerHTML = "Member " + (counter + 1) + res;
             document.getElementById(divName).appendChild(newdiv);
             counter++;

          },
          error: function() {
              alert('error');                 
          }
    });
}