Question

我正在执行2个脚本。第一个脚本（jquery）创建输入并将其添加到表单。第二个脚本获取动态创建的输入的值。但是现在我得到的是空值。为了解决每个问题，是的，第一个脚本已经过多次测试，并且确实创建了输入并正确附加了值。如何从第二个脚本中动态创建的Element中获取值？

第一个脚本

tsconfig.json

第二个脚本

<script src="js/firstscript.js"></script>
  $(document).ready(function(e){
    $('.button').click(function(e){

      e.preventDefault();
      var userCurrency = 'usd';

      $('<input>').attr({
        type: 'hidden',
        id: 'userCurrency',
        name: 'userCurrency',
        value: userCurrency
      }).appendTo('#payment-form');

  })
})

Answer 1

如果您希望这些脚本彼此分开，则可以使用此事件处理程序：

document.getElementById('payment-form').addEventListener("DOMNodeInserted", function (ev) {
  if (ev.target.id === 'userCurrency') {
    console.log(ev.target.id);
  }
}, false);

它将触发，然后将您的元素追加到表单。

在其他情况下，如果您可以加入脚本，则应在添加元素或调用全局函数之后放置第二个脚本

Answer 2

我解决了我的问题，基本上我只是将jquery和javascript混合在一起。是的，我知道不好的做法，但是现在它可以正常工作了，这对团队来说很重要。

总之，这就是最终结果。没什么神奇的，但它对我有用：

<script src="js/firstscript.js"></script>
  $(document).ready(function(e){
    $('.button').click(function(e){

      e.preventDefault();
      var userCurrency = 'usd';

      $('<input>').attr({
        type: 'hidden',
        id: 'userCurrency',
        name: 'userCurrency',
        value: userCurrency
      }).appendTo('#payment-form');

  })
})

//vanilla javascript code below
var amountCurrency = userCurrency;

getElementById其中动态创建元素并将其附加到DOM

2 个答案: