动态列出并点击事件答案

【问题标题】：Dynamically list and click event动态列出并点击事件
【发布时间】：2019-05-04 23:08:26
【问题描述】：

我需要制作列表（如 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>

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

【问题讨论】：

标签： javascript jquery

【解决方案1】：

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

$(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"));
    });

    }
});
});

【讨论】：

我已经更新了点击事件。请尝试一下。
我不知道我在哪里犯错了，但是有了这个alert($(this).attr("data"));，我不断得到Uncaught SyntaxError: Unexpected token (
alert($(this).attr("data")); 中没有错误线。我认为您在其他行中弄错了。
是的，我知道，但我尝试在此处验证代码而不发出警报esprima.org/demo/validate.html，一切正常
我已经编辑了答案，并在 esprima.org/demo/validate.html 中得到了验证

【解决方案2】：

目前，我唯一能让它工作的方法是使用event.stopImmediatePropagation();

function setSourceToVideoPlayer(event){
            alert(event.data.param1);
            event.stopImmediatePropagation();
        }

这里是关于this 的详细信息。如果这不是一个好方法，请告诉我。谢谢

【讨论】：