Question

我有一个带有代码的弹出框：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<ul>
<li><a>list 1</a></li>
<li><a>list 2</a></li>
</ul>

但是当我按下启动按钮时，浏览器控制台出现错误：<div class="popup_block" id="open-voucher"> <div class="dialog-modal tech-support"> <div style="color: #fff;background: #232323;padding: 25px;text-align: center;"> <div class="wrap-input" style="margin: 0 auto 15px;width: 253px;"> <input class="activate-voucher-input" type="text" placeholder="AAAAA-BBBBB-CCCCC-DDDDD-EEEEE-FFFFF"> </div> <div style=""><button class="btn-yellow free-coins-btn btn-get-daily-bonus" type="submit">Activate</button></div> </div> </div> </div>。

我的JS代码：

Uncaught TypeError: Cannot read property 'trim' of undefined

我该如何解决？

编辑：

我尝试编辑代码：

        var el = $(this).parents('.popup_block').find('.btn-get-daily-bonus');
        var code = el.val().trim();
        $.ajax({
            url: '/promocode',
            type: 'POST',
            dataType: 'json',
            data: {code: code},
            success: function (data) {
                    showmessages(data.status, data.message);
            },
            error: function (err) {
                showmessages(err.status, err.message);
                console.log(err.responseText);
            }
        });
    });

  <div class="dialog-modal tech-support">

<div style="color: #fff;background: #232323;padding: 25px;text-align: center;">

                <div class="wrap-input" style="margin: 0 auto 15px;width: 253px;">
                    <input class="activate-voucher-input" type="text" placeholder="AAAAA-BBBBB-CCCCC-DDDDD-EEEEE">
                </div>
                <div style=""><button class="btn-yellow activate-voucher-btn">Activate</button></div>
            </div>

  </div>
</div>
And

但是这样的呼叫也不起作用，什么也没发生。控制台不发誓，也不执行操作。

Answer 1

function onActivate() {
  var el = $('#activate-voucher-input');
  var code = el.val().trim();
  $.ajax({
    url: '/promocode',
    type: 'POST',
    dataType: 'json',
    data: {code: code},
    success: function (data) {
            showmessages(data.status, data.message);
    },
    error: function (err) {
        showmessages(err.status, err.message);
        console.log(err.responseText);
    }
  });
}

function showmessages(status, message) {
  console.log(status, message);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="popup_block" id="open-voucher">
     <div class="dialog-modal tech-support">

<div style="color: #fff;background: #232323;padding: 25px;text-align: center;">

                <div class="wrap-input" style="margin: 0 auto 15px;width: 253px;">
                    <input id="activate-voucher-input" type="text" placeholder="AAAAA-BBBBB-CCCCC-DDDDD-EEEEE-FFFFF">
                </div>
                <div style=""><button onclick="onActivate()" class="btn-yellow free-coins-btn btn-get-daily-bonus" type="submit">Activate</button></div>
            </div>

     </div>
 </div>

您需要按ID查找元素。实际上，$('.class-name')将返回具有class-name的元素数组，而el.val()可能是undefined。

Answer 2

我想这就是你想要做的

$('button').click(function() {
  var el = $(this).parents('.popup_block').find('.activate-voucher-input')[0];
  var code = $(el).val().trim();
  console.log(code);
  $.ajax({
    url: '/promocode',
    type: 'POST',
    dataType: 'json',
    data: {code: code},
    success: function (data) {
      showmessages(data.status, data.message);
    },
    error: function (err) {
      showmessages(err.status, err.message);
      console.log(err.responseText);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="popup_block" id="open-voucher">
  <div class="dialog-modal tech-support">

    <div style="color: #fff;background: #232323;padding: 25px;text-align: center;">

      <div class="wrap-input" style="margin: 0 auto 15px;width: 253px;">
        <input class="activate-voucher-input" type="text" placeholder="AAAAA-BBBBB-CCCCC-DDDDD-EEEEE-FFFFF">
      </div>

      <div style="">
        <button class="btn-yellow free-coins-btn btn-get-daily-bonus" type="submit">Activate</button>
      </div>
    
  </div>
  </div>
</div>

未捕获的TypeError：无法读取未定义的属性'trim'

2 个答案: