使用JQuery v1.7.2访问动态创建的表中的数据属性

时间:2015-06-15 13:36:09

标签: jquery

我试图将值传递给模态。我不得不使用jquery版本1.7.2。我无法做到这一点,因为我遇到的问题是,当我尝试访问时,html似乎不在dom中。

我有一个数据表,我想访问表行中的数据属性。问题是我的表行使用append()函数附加到DOM,看起来当我尝试单击一个表元素并访问相关行时,我在控制台中得到一个未定义的错误。

我在document.ready函数中拥有所有的javascript,但它似乎没有达到预期的效果。

如果我使用我想要访问的数据属性对表行进行硬编码,则可以正常工作。

$j(document).ready(function () {  
$j('#myModal').modal({
    keyboard: true,
    backdrop: "static",
    show:false,

}).on('show', function(){
      var getGenotypeFromRow = $j(this).data('modalgenotype');
      console.log('getGenotypeFromRow')
      console.log(getGenotypeFromRow)
    //make your ajax call populate items or what even you need
    $j(this).find('.modal-body').html($j('<b> Genotype selected: ' + getGenotypeFromRow  + '</b>'))
});

$j("#search-results-table").find('tr[data-target]').on('click', function(){
    //or do your operations here instead of on show of modal to populate values to modal.
     $j('#myModal').data('modalgenotype',$j(this).data('genotype'));
});



var search_id_1 = $searchTool.doSearch({
                "gene_id": "673",
            }, function(data, resultset_length, current_index, more_data) {

                for(var i=0; i<data.length; i++){
                    $('#search-results-table > tbody:last-child').append('<tr class="row" data-toggle="modal" data-genotype="'+data[i].Genotype+'"><td>'+data[i].Genotype+'</td><td>'+data[i].Short_Desc+'</td><td>'+data[i].Gene_ID+'</td><td>'+data[i].Parental_Cell_Line+'</td><td><a href="#myModal" data-toggle="modal" data-target="#myModal" role="button" class="btn" data-toggle="modal" data-genotype="'+data[i].Genotype+'">Launch demo modal</a></td><td><a href="#" class="add-to-cart">Add to cart</a></td></tr>');
                }


                current_chunk++;
                if(current_chunk >= max_chunks) {
                    $highland_search.cancelSearch(search_id_1);
                }
            });
});

硬编码表(可行):

<tr data-toggle="modal" data-genotype="12345xyz" data-target="#myModal">
    <td>12345xyz</td>
        <td>a</td>
    <td>b</td>
</tr>

有人可以建议我如何动态加载我的表行并访问表行的数据属性吗?

0 个答案:

没有答案