未捕獲的類型錯誤：無法讀取未定義的屬性“修剪”

Question

我有一個帶有代碼的彈出塊：

 <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>

但是當我按下 Activate 按鈕時，我的瀏覽器控制台出現錯誤： Uncaught TypeError: Cannot read property 'trim' of undefined 。

我的JS代碼：

        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

    $(document).on("click", "activate-voucher-btn", function (t) {
        $.ajax({
            type: 'POST',
            url: '/promocode',
            data: {
                voucher: $(".activate-voucher-input").val()
            },
            success: data => {
                $this.notify(data.type, data.message);
            }
        });
    });

但是這樣的調用也不起作用，什么也沒有發生。 控制台不罵人，不執行動作。

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>