将 <li> 置于其他 <li> 内部 - 单击时输入字段的数据 ID

Targetting <li> inside of other <li> - Data-id to input field on click

本文关键字：li 输入 单击 字段 ID 数据 其他 于其他 内部      更新时间：2023-09-26

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

我有一个简单的菜单结构，当单击"li"时，我希望将数据 id 值传递给输入字段。我可以让它正常工作，但我在底层"li'es"方面遇到了问题。因为它们被"主"li"包围"，因此即使它不是我点击的那个，也会选择这个"li"中的数据 id。

请参阅此处的示例：http://jsfiddle.net/g35banrp/1/

如果您单击

例如生产，技术或选项1，它可以正常工作，但是如果您单击"国家"或"经销商"，则将选择"销售"。我明白为什么它会这样做，但似乎无法修复它。

我尝试使用 .最接近的选择器，但它似乎没有任何帮助。任何提示，指针或链接都非常感谢:)

此致敬意彼得

脚本：

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

您正在寻找.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/可防止事件在父/子关系中冒泡。

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

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