Question

我有20个链接。当用户悬停向下箭头图像（用于悬停）时，前10个链接直接对用户可见，剩余的10个链接显示。当用户单击任何一个悬停链接时，直到当前单击的链接将移动到左侧（另一个向下箭头用于通过创建li动态地将右侧链接添加到左侧）。这个工作正常。但这不起作用，反之亦然。（即）当我单击左侧链接时，它应该导航到右侧。单击事件不适用于我动态创建的li元素。请任何人帮我吧??????

我的示例代码：

//To append the line from right hover to looplink div
$('#loop_link').append('<li id="pagelinkli_'+val3+'">'+$('#pagelinkli_'+val3).html()+'</li>');

//To hide the link in right hover div once it selected and appended in loop link div
$('#pagelink_a  #pagelinkli_'+val3).css('display','none');

//This line to move the link from loop link to left hover div
$('#pagelink_a_left ul').prepend(('<li id="pagelinkli_'+val6+'">'+$('#pagelinkli_'+val6).html()+'</li>'));

//This line to hide the link in looplink div              
$('#loop_link #pagelinkli_'+val6).css('display','none');

此代码就像是从右侧悬停到标签导航链接，从左侧悬停到左侧悬停，反之亦然......

Answer 1

http://api.jquery.com/on/

$("#pagelink_a_left").on("click", "li", function() {
    alert($(this).html());
});

http://jsfiddle.net/yakbQ/

Answer 2

问题是新链接是动态添加的，并且在加载页面时不是DOM的一部分。

所以你可以使用live jquery函数（LIVE已弃用，所以我不建议）或者你可以使用这样的东西

$("body").on("click", "link div", function() {
    $('#loop_link').append('<li id="pagelinkli_'+val3+'">'+$('#pagelinkli_'+val3).html()+'</li>')
});

Answer 3

尝试使用on而不是bind或直接使用click功能。

尝试使用以下脚本。

$(".listContainer").on("click","li",function() {

});

on method将允许您为生成的动态元素（+已存在的元素）绑定click事件。

根据许多ppls建议改变了实时方法

点击事件动态添加li元素？

3 个答案: