Question

我正在尝试在无序列表中构建可点击项目菜单。无论我放置什么元素，我都用列表项包装，没有激发我提供的点击回调方法。

这里我使用了一个href elememt

trackDeleteButton = $('<a href="#">DELETE</a>')[0];
$(trackDeleteButton).click(function () {
    myself.browser.removeTrack(myself.track);
    igv.popover.hide();
});

//创建一个列表项包装器并取消排序列表项

var acc = [],
    listItem = $('<li>')[0],
    unorderedList = $('<ul>')[0];

$(listItem).append(trackDeleteButton);
acc.push($(listItem).prop('outerHTML'));

//为grins添加其他随机项

["foxtrot", "bravo", "lima"].forEach(function (item, i, items) {
    acc.push('<li>' + item + " " + i + '</li>');
});

$(unorderedList).append( acc.join('') );

//将unoderlist传递给方法，以便在div中托管它。

igv.popover.presentTrackMenu(e.pageX, e.pageY, $(unorderedList));

点击方法从不被调用。为什么？有什么工作。

Answer 1

这是正常行为，因为您的脚本在elem之前加载，使用on方法附加事件

$("parent").on("click", "your item selector", someFunction);

someFunction(e){

   e.preventDefault() || return false - to prevent normal behavior of a elem
}

Answer 2

我不确定您要做什么，但以下代码显示了如何动态地为li元素中的链接添加点击处理程序：

$(function() {
    var elNo = 0;
    var $list = $('#dynamicList');
    
    $('#addElement').on('click', function(){
        $newLi = $('<li/>', {text: elNo} ).appendTo($list);
        $delLink = $('<a/>', {href: '#', text: ' delete', class: 'remove'}).appendTo($newLi);
        $delLink.on('click', function(){
            $(this).closest('li').remove();
        });
        
        elNo++;
    });
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="addElement">Add list item</button>
<ul id='dynamicList'>
</ul>

如何将单击方法添加到无序列表中的href链接？

2 个答案: