Question

我目前正在使用jquery load（）函数来加载包含html代码的文本文件，以便将其插入我当前的页面中。我遇到的问题是在这个新的html代码中我有更多按钮，我想分配onClick事件以将更多文本文件加载到DOM但是，似乎因为文件已加载，新的html元素没有接收到我的jQuery中的事件处理程序。

$(".a").click(function(){       
    $(".teamsContain").load("views/groups/groupA.txt");
});

此代码加载一个视图，显示组内的团队列表，当它已加载时我希望选择单击一个团队以获取有关游戏时间的详细信息，这些游戏时间将插入到DOM中，而另一个load（）为以下

$(".brazil").click(function(){      
    $(".matches").load("views/upcomingGames/brazil.txt");
});

但是在这个阶段它不会工作。

任何人都可以指出我正确的方向，任何帮助将不胜感激。感谢

Answer 1

尝试这样的事情

$(".teamsContain").on('click','.brazil',function(){
    $(".matches").load("views/upcomingGames/brazil.txt");
})

参考

delegate()

根据一组特定的根元素，为现在或将来与选择器匹配的所有元素的一个或多个事件附加一个处理程序。

Answer 2

你试过'on'功能吗？ https://api.jquery.com/on/

$(".matches").on('click', '.brazil', function(){      
    $(".matches").load("views/upcomingGames/brazil.txt");
});

此外，如果您的点击事件定位了一个唯一属性，例如“id”，则可以避免在js中出现重复。

像这样......

HTML：

<a id="brazil" class='jsloadfile'>Click to load</a>

JS：

$(".matches").on('click', '.jsloadfile', function(){   
    var filename = $(this).attr('id');   
    $(".matches").load("views/upcomingGames/"+filename+".txt");
});

Answer 3

你必须使用event delegation来达到这个目的，例如。

因为第一个正在工作 - 但最好让它绑定到已知的最稳定的 DOM节点，你可以做类似的事情

$(".a").on('click', '.brazil', function(){      
    $(".matches").load("views/upcomingGames/brazil.txt");
});

确保在文档级别

中捕获它

$(document).on('click', '.brazil', function(){      
    $(".matches").load("views/upcomingGames/brazil.txt");
});

Answer 4

event delegation使用on()之类的，

$(document).on('click',".brazil",function(e){
    e.preventDefault(); // to prevent default behaviour of anchor tag
    $(".matches").load("views/upcomingGames/brazil.txt");
}).on('click',".a",function(e){
    e.preventDefault();
    $(".teamsContain").load("views/groups/groupA.txt");
});

jQuery ajax问题DOM操作

4 个答案: