在其他</li> <li>中定位<li> - 点击

Question

我认为这很简单，但在尝试了很多不同的事情后，我希望你能帮助我。

我有一个简单的菜单结构，当点击“li”时，我希望将data-id值传递给输入字段。我可以让这个工作得很好，但我遇到了潜在的“li'es”问题。因为它们被“主”“li”“包围”，因此即使它不是我点击的那个，也将选择来自该“li”的数据id。

请看这里的例子： http://jsfiddle.net/g35banrp/1/

如果单击“生产”，“技术”或“选项1”，它可以正常工作，但如果单击“国家”或“经销商”，则选择“销售”。 我知道为什么会这样做，但似乎无法解决它。

我尝试过使用.closest选择器，但似乎没有任何帮助。 非常感谢任何提示，指针或链接：）

祝你好运， 彼得

脚本：

$('li.document').on('click',function(){var content= $(this).attr("data-id")$('#test').val(content);});

Answer 1

您正在寻找.stopPropagation()方法：http://jsfiddle.net/g35banrp/2/

$('li.document').on('click', function (e) {
    e.stopPropagation();
    var content = $(this).attr("data-id")
    $('#test').val(content);
});

https://api.jquery.com/event.stoppropagation/可防止事件在父/子关系中冒泡。

Answer 2

您想获得点击的确切目标，因此请传递一个事件并使用event.target来获取正确的li。

$('li.document').on('click',function(event){
    var content = $(event.target).attr("data-id")
    $('#test').val(content);
});