javascript - 在 HTML 5 输入中调用 id 时未定义

标签 javascript html ajax

<分区>

我有一个页面,其中包含 x 个项目,每个项目都包含一个 HTML 5 输入。

当用户更改输入的值时,服务器会通过 AJAX 调用被调用。然后,服务器使用包含数量值的项目数组的 JSON 进行响应。如果返回的数量值与发送到服务器的值(输入值)不同,我需要更改输入框值,使其等于返回的数量值。

我的问题是我在警报中得到的是 undefined 而不是 id,有人可以告诉我原因吗,提前谢谢!

JavaScript:

//loop through JSON returned items array
for (var i = 0; i < data.items.length; i++) {
     var id = data.items[i].id;
     var title = data.items[i].title
     var price = data.items[i].price
     var quantity = data.items[i].quantity
     var image = data.items[i].image

     //output JSON to HTML
     $("#result").append("<div class='column left'><img src="+ image + "width=100 height=100 style=padding:20px></div><div class='column middle' >" + " " + title + " " + price + "</div><div class='column right' ><input id='" + id + "' type=number min=1 max=10 step=1 value="+quantity+" maxlength=2 size=2 />&nbsp;<br><a data-id='" + id + "' href=# id='remove'>Remove</a></div>");

     //load subtotal when page loads
     $('#subtotal').html(data.items_subtotal_price);
}

JSON

//QUANTITY update
$(":input").bind('keyup mouseup', function () {
      $.ajax({
          url: "https://example.com/cart/change.json",
          dataType: "jsonp",
          data: {
             id: $(this).attr('id'),
             quantity : $(this).val()
          },
          //JSON response
          success: function(data) {
             console.log(data); //formatted JSON data
             $('#subtotal').html(data.items_subtotal_price); //set subtotal from JSON

            //1.  loop through JSON items for id >> get returned quantity value where id matches id of input box
            //2.  if quantity returned is not equal to the quantity sent then it's been disallowed by the server >> update input box value to equal returned value
            // getting UNDEFINED - 
            alert($(this).attr('id'));
        }
     });
});

最佳答案

success()函数中,this指的是success()函数而不是HTML元素keyup mouseup绑定(bind)函数。要获得 keyup mouseup 函数实例,您可以在编写 AJAX 之前添加另一个变量 self = this。现在,在 success 函数中,您可以访问 self 引用以获取 ID 属性。示例:

$(":input").bind('keyup mouseup', function () {
    var self = this;
    $.ajax({
        // .....
        // ....
        success: function(data) {
            alert($(self).attr('id'));
        }
    });
});

或者,您可以使用 Function.prototype.bind()this 引用绑定(bind)到成功函数没有第二个 var self 的函数。例如

$(":input").bind('keyup mouseup', function () {
    $.ajax({
        // other properties
        success: (function(data) {
            alert($(this).attr('id'));
        }).bind(this)
    });
});

关于javascript - 在 HTML 5 输入中调用 id 时未定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57323911/

相关文章:

css - CSS 和 DIV 高度问题

javascript - 如何在 JavaScript 中获取 foreach 循环之外的数据?

javascript - 有没有一个工具可以检查html中脚本的加载顺序

javascript - 用于协作代码编辑的 Ace Editor 和 meteor : Observe hangs app

html - 带有 float 元素的 div 的 Css 动态宽度

php - history.pushState 导航 - 元标签怎么样 - 单独的模板?

php - 如何使用 Ajax 获取 URL 的标题、描述、image_url,就像在 Facebook 上共享链接一样

javascript - 通过chrome扩展从网页中提取数据

javascript - jQuery - 有没有办法让 'save' 成为 dom 元素 (css) 的状态并恢复到那个保存的状态等等?

html - 在 HTML 的嵌入式 SVG 中嵌入 HTML?