jQuery、Ajax、JavaScript - 通过id获取元素

Question

jQuery、Ajax、JavaScript - 通过id获取元素

3

我有一些ajax onclick的东西，当从菜单中选择值时，会更新这行：

<li id="li_273" data-pricefield="special" data-pricevalue="0" >

这段代码的意图是获取data-pricevalue的值，然后乘以另一个输入框中输入的数值。下面是我尝试编写的函数：

$('#main_body').delegate('#element_240','keyup', function(e){

var temp = $(this).attr("id").split('_');
var element_id = temp[1];

var price = $('#li_273').data("pricevalue"); 

var ordered = $(this).val();

var price_value = price * ordered;

price_value = parseFloat(price_value);
if(isNaN(price_value)){
    price_value = 0;
}

$("#li_273").data("pricevalue",price_value);
calculate_total_payment();

});

但是我遇到了以下错误： Uncaught TypeError: Cannot call method 'data' of null

似乎我的尝试从getElementById中获取价格值不正确。有什么建议吗？

更新：以上代码已根据您的建议进行了编辑，感谢大家。现在看起来它运行得很好。

- MrTechie

2

请注意，delegate()已被弃用，请改用on()。 - Christophe

@Christophe是正确的，这取决于OP使用的版本。 - wakooka

2

@Christophe：从jQuery 1.7开始，.delegate()已被.on()方法取代。Delegate()尚未被标记为过时。请参阅已标记为过时的功能：http://api.jquery.com/category/deprecated/。超出使用期限和过时之间有区别。标记为过时的功能可能会在任何新版本中被删除，而被取代的功能则不会。 - Nope

当我尝试使用.on方法时，我遇到了错误，但是委托却可以工作。 - MrTechie

@FrançoisWahl 对，暂时来说“superseded”更正确。 - Christophe

1

@Christophe：另外，有趣的是，在jQuery的后续版本中，使用delegate、live(已弃用)、bind等方法实际上并不重要，因为这些方法已经被重写为使用on()。例如1.7.1源代码：delegate: function( selector, types, data, fn ) {return this.on( types, selector, data, fn);}, 或 bind: function( types, data, fn ) {return this.on(types, null, data, fn );}, 然而，为了避免任何意外问题，我们应该始终遵循文档中给出的建议。 - Nope

7个回答

3

getElementById并不返回一个jQuery对象，它只返回一个普通的DOM对象。

你可以用jQuery方法将任何DOM对象包装起来，以获取它作为一个jQuery对象：

 $(document.getElementById("li_273")).data("pricevalue").val();

或者更好的方法是使用jQuery。

 $("#li_273").data("pricevalue").val()

- Craig MacGregor

2

你应该使用document.getElementById('li_273')这个普通的方法，不像jQuery一样需要哈希符号。

编辑正如@kennypu所指出的那样，你在一个非jQuery对象上使用了jQuery。 @Craig 提供了最好的解决方案。

- Dave Anderson

2

另外需要补充的是，他正在将本地JavaScript与jQuery混合使用。该行代码应为$('#li_273').data('pricevalue').val(); - kennypu

1

你的javascript中getElementById写法有误，不需要使用#。如果你在使用jQuery，请改为以下写法（我还删除了.val()因为它是不必要的）：

$('#main_body').delegate('#element_240','keyup mouseout change', function(e){

    var temp = $(this).attr("id").split('_');
    var element_id = temp[1];

    var price = $('#li_273').data("pricevalue");

    var ordered = $(this).val();

    price_value = parseFloat(price_value);
    if(isNaN(price_value)){
        price_value = 0;
    }

    $("#li_273").data("pricevalue",price_value);
    calculate_total_payment();          
});

- PhearOfRayne

1

document.getElementById('#li_273').data("pricevalue").val(); 应该改为 jQuery('#li_273').data("pricevalue").val();

再次提醒，变量 price_value 不存在，我认为你的意思是 price。

例如：

$('#main_body').delegate('#element_240','keyup mouseout change', function(e){

    var temp = $(this).attr("id").split('_');
    var element_id = temp[1];

    var price = $('#li_273').data("pricevalue").val();

    var ordered = $(this).val();

    var price_value = parseFloat(price);
    if(isNaN(price_value)){
        price_value = 0;
    }

    $("#li_273").data("pricevalue",price_value);
    calculate_total_payment();          
});

- Arun P Johny

疲惫的眼睛指出price_val和price_value不同。它可以工作，但总价格是错误的。它给了我$238.00而不是选择值为10时的$23.80。有什么想法吗？ - MrTechie

1

既然你正在使用jQuery，为什么要使用document.getElementById而不是$(...)？应该这样写：

$('#li_273').data("pricevalue")

请注意，data() 方法仅在 jQuery 对象上定义，而不是 DOM 元素上。您不需要在此之后调用 val() -- 这是为了获取表单元素的值。

- Barmar

谢谢你的解释。jQuery对我来说仍然很新，我正在努力学习。你的解决方案有效 - 但是，如果物品价格是$2.38，而我输入10个 - 它会给我$238.00而不是$23.80。有什么想法吗？ - MrTechie

1

document.getElementById('#li_273') 是问题所在。该方法无法识别哈希符号。如果您想使用该方法获取元素ID，请尝试 document.getElementById('li_273')，它会起作用。

否则，请全部使用jQuery。

- Robusto

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ja͢ck · Accepted Answer

这部分有误：

var price = document.getElementById('#li_273').data("pricevalue").val();

相反，你应该在这里全部使用jQuery：

var price = $('#li_273').data("pricevalue");

顺便提一下，你不应该使用 .val() ，因为 .data() 已经返回一个字符串。而 .val() 仅用于输入元素，如 <input> 和 <select> 等。更新此外，你的其余代码应该像这样：

var price_value = parseFloat(price);
if(isNaN(price_value)){
    price_value = 0;
}