jquery 即使使用“.on”点击也不绑定

Question

这件事我已经做过 100 次了，但我不明白为什么它没有约束力。我正在从 TAFFY 数据库创建一个逐项列表。

// get matching data from tfPLdata
var ts="";
var match=0;
tfPLdata({"vType":{likenocase:vType},"vSubType":{likenocase:vSubType}}).each(function (record,recordnumber) {   
    match++;
    ts+="<div class='vWRAP' id='vh_"+recordnumber+"'>";
        ts+="<div class='vTN'>"+record["vTypeName"]+"</div>";
        ts+="<div class='vP'>"+record["vPrice"]+"</div>";
    ts+="</div>";
});

结果是这样的

<div class='vWRAP' id='vh_0'>
    <div class='vTN'>my corn seed 2</div>
    <div class='vP'>165.00</div>
</div>
<div class='vWRAP' id='vh_1'>
    <div class='vTN'>my corn seed 1</div>
    <div class='vP'>150.00</div>
</div>

然后我尝试将 CLICK 绑定到 class.vWRAP

$(".vWRAP").click(function(){
        console.log("test");
});

但就是不触发。

为什么？

========================================

我添加了代码：

$(function() {
      $(".vWRAP").each(function(){
        console.log( $(this).attr("id") );
        $(this).click(function(){
            console.log("test");
        });
      });
});

它正确显示了每个 .vWRAP 的 ID。但是它仍然不会绑定 "click"。

Answer 1

我假设您的元素是动态添加的。要将点击绑定到动态元素，请使用 jQuery .on()

$(function () {
    $(document).on('click', '.vWRAP', function() {
        console.log("test");
    });
});

另外，以防万一您不知道 $(function () { ... }); 是 document ready $(document).ready(function () { ... });.

的缩写

我也使用 jQuery 而不是 $ 因为它避免了冲突问题。

jquery 即使使用“.on”点击也不绑定

jquery click not binding even when using ".on"

jquery

bind

click