时间戳

首页 > 解决方案 > 控制由javascript动态插入的html

javascript - 控制由javascript动态插入的html

问题描述

我用 JavaScript 生成了一个专业的卡片 HTML：

var professionalsCards = '';
$.each(professionalsData, function(i, item)
{
    professionalsCards += '<div class="col-md-3 professional_list_card">';
    professionalsCards += '<a href="#" onclick="showProfessionalDetails()">';
    professionalsCards += '<div class = "panel panel-default professional_list_panel">';
    professionalsCards += '<img src="'+websiteTPL+'images/user-without-avatar-400x400.jpg" height="75px" width="75px" alt="..." class="img-circle center-block" />';
    professionalsCards += '<h4 class="text-center">'+item.fullname+'</h4>';
    professionalsCards += '<input type="hidden" id="professional_uuid" name="professional_uuid" value="teste" />';
    professionalsCards += '</div></a></div>';
});

$("div#professionals_list").html(professionalsCards);

当我直接用 HTML 填充它时，jQuery 的点击功能可以正常工作：

$(".professional_list_card").click(function(event)
{
    event.preventDefault();
    var professional_uuid = jQuery(this).find("input:hidden");
    alert(professional_uuid.val());
});

但是，当我用 JavaScript 插入 HTML 时，jQuery 的点击功能不起作用。然后我尝试制作一个函数并使用onclick，也不起作用：

function showProfessionalDetails()
{
    var professional_uuid = jQuery(this).find("input:hidden");
    alert(professional_uuid.val());
}

我如何控制用 JavaScript 插入的 HTML？点击和其他事件？

谢谢你！

标签： javascriptjqueryhtmldynamically-generated

解决方案

为此，您需要将click事件委托给 DOM 元素。

$("document").on("click", ".professional_list_card").click(function(event)
{
    event.preventDefault();
    var professional_uuid = jQuery(this).find("input:hidden");
    alert(professional_uuid.val());
});

推荐阅读