时间戳

首页 > 解决方案 > 动态列出并点击事件

javascript - 动态列出并点击事件

问题描述

我需要制作列表（如angularjs中的ng-repeat）并单击列表中的任何项目，使用所选项目的传递数据调用函数

我用$.ajax电话列出清单$.each

$(document).ready(function() {

    var inHTML = "";

    $.ajax({
        url:        'http://some.some',
        dataType:   "json",
        success:    function(data){
            $("#dynamicTable").append('<tr><th><h5 style="margin-left: 15px; margin-top: 15px;">' + "Events" + '</h5></th></tr>');
            $.each(data.videos, function(key, value){

                $("#dynamicTable").append('<table><tr><td class="aktivniItem backgroundIdKlupa_izbornik_td" style="color: white">'+ moment(value.time).format('DD-MM-YYYY HH:mm:ss') +'</td><tr></table>').click({param1: value.href}, setSourceToVideoPlayer);
            });
            function setSourceToVideoPlayer(event){
                alert(event.data.param1);
            }
        }
    });
});

并在 HTML

<table id="dynamicTable" class="table-hover"></table>

问题是，使用此代码，当我单击列表中的任何项目时，我会收到所有项目的传递数据的警报，一个接一个，而不仅仅是单击。

标签： javascriptjquery

解决方案

请尝试以下代码。我给出了唯一的想法，可能是一些语法错误。

$(document).ready(function() {

var inHTML = "";

$.ajax({
    url:        'http://some.some',
    dataType:   "json",
    success:    function(data){
        $("#dynamicTable").append('<tr><th><h5 style="margin-left: 15px; margin-top: 15px;">' + "Events" + '</h5></th></tr>');
        $.each(data.videos, function(key, value){

            $("#dynamicTable").append('<table><tr><td class="aktivniItem backgroundIdKlupa_izbornik_td" data="' + value.href + '" style="color: white">'+ moment(value.time).format('DD-MM-YYYY HH:mm:ss') +'</td><tr></table>');
        });

    $(".aktivniItem").click(function (){
     alert($(this).attr("data"));
    });

    }
});
});

推荐阅读