Question

好吧我在获取img ID方面遇到了麻烦。从某种意义上说，我的数据是来自db，我在jquery中使用一个函数来发布和检索并循环出所有img就像这样的东西

function format(d) {
    var html = "";
    var card_os = null;
    $.each(d, function (k, v) {
        if (v.card_os) {
            card_os = v.card_os;
        }
        if (v.card_id) {
            var card_id = v.card_id;
            html += '<li>' +
                '<h3>' + card_id + '</h3>' +
                '<img id="card_dialog" title="' + card_id + '"     src="images/' + card_id + '.jpg" width="100" height="100"></img>' +
                '</li>';
        }
    });
    $('#ctitle').html('<h1>ChaosTCG: ' + card_os + '</h1>');
    return html;
}

你可以在我的img中看到，有一个叫做card_dialog的id。这个ID的目的是获取onclick img并执行一个jquery对话框，但是使用一个简单的代码就像获取img click来做一个警报甚至不工作

$("#card_dialog").on('click',function() {
    console.log("click");
    alert("click")
});

如果我右键单击我的html作为视图源。我没有看到我的图像填充在代码中，因为它不是硬编码的，而是使用jQuery。这是因为没有抓住#card_dialog id的原因吗？如果我手动将img编码为HTML，我就可以触发点击事件。

Answer 1

将on()用于动态元素，例如

使用your-closest-parent-static-element绑定您的img代码上的点击事件，如果您不知道，则只能使用document。

$(function(){
    $("your-closest-parent-static-element").on('click','.card_dialog',function() {
       console.log("click");
       alert(this.src);
    });
});

在页面中将card_dialog作为id must be unique添加到您的img标记，

 '<img class="card_dialog" id="card_dialog" title="'+card_id+'" src="images/'+card_id+'.jpg" width="100" height="100"/>'

Answer 2

将id更改为class

function format ( d ) {
var html = "";
var card_os = null;
$.each(d,function(k,v){
if(v.card_os){
card_os = v.card_os;
}
if(v.card_id){
 var card_id = v.card_id;
  html += '<li>'+
          '<h3>'+card_id+'</h3>'+
          '<img class="card_dialog" title="'+card_id+'"     src="images/'+card_id+'.jpg" width="100" height="100"></img>'+
          '</li>';
 }
 });
 $('#ctitle').html('<h1>ChaosTCG: '+card_os+'</h1>');
 return html;
}

$(".card_dialog").on('click',function() {
console.log("click");
alert("click")
});

没有从jquery循环html人口获取img id

2 个答案: