Home / Questions / 20310
Accepted
Oscar E. Alvarado
Asked: 2020-08-12 14:52:35 +0800 CST 2020-08-12 14:52:35 +0800 CST

单击事件在运行时使用 JQuery 添加的 html 中不起作用？

  • 772

我的问题如下：

我在运行时使用 JQuery 在我的主页中添加一个 html，我使用以下代码创建并添加它

function show_agent_add(obj_agent, div_cont){
    var div_bar;
    $.get("view/bar_agent.html", function(data){
        div_bar = $(data);
        div_bar.find(".agent-data").html(obj_agent._getFirstName());        
        return false;
    });

}

另一方面，对于这个添加的元素，您想从 jquery 访问其单击事件，但在调试时它无法识别它。

function show_detail_agent(){
    $(".content-agents .bar-agent-content .bar_agent").on("click", function(){
        //$(this).next().toggle();
        console.log("prueba");
    });
}

在 html 中，我有一个从 div 创建的结构，其中包含一个名为 .bar_agent 的类。

我想知道访问活动的正确方法是什么。

javascript

2 Answers

  1. 一旦事件链接到 DOM 元素，如果您动态添加新元素，它们不会与该事件关联，但您必须强制关联它。

    如果页面加载中的“a”元素发生以下事件：

    $(document).ready(function(){

    $('a').on('click', function(e){
        alert('click');
    });

});

    您之后动态添加的任何内容都不会与该事件相关联。

    我提出以下建议，您创建一个关联事件的函数：

    function addAEvent(){

    $('a').unbind();

    $('a').on('click', function(e){
        alert('click');
    });    
}

    然后，在文档加载和添加动态元素后，调用该函数addAEvent()

    $(document).ready(function(){
    addAEvent();

    $.get("....", function(data){

        $('.div').html(data.loquesea);
        addAEvent();
    });

});

    通过这种方式，您可以确保无论何时添加数据，都会添加事件，并且请记住，当您执行 unbind() 时，您会清理事件，以便没有多少事件与同一个 DOM 元素相关联，然后出现问题.

    可能有更好的解决方案，但我通常使用这个，它对我来说效果很好。

    • 3
  2. Best Answer

    您可以将处理程序附加到document或附加到包含新元素的顶级元素之一，实际上您走的是正确的方式，如果您查看.on()的文档，您会看到它接受作为第二个参数过滤元素后代的选择器 触发事件的元素：

    $(document).on("click", ".content-agents .bar-agent-content .bar_agent", function(){
    //$(this).next().toggle();
    console.log("prueba");
});
    • 2