在 DOM 中设置新定位点

Make a new anchor live in DOM

本文关键字：定位 新定位 DOM 设置      更新时间：2023-09-26

我正在尝试通过下面的代码添加新的锚点。addButton函数完美运行，并在适当的位置添加适当的元素。

但是，该元素不是"活动"的。具体来说，我不能像其他人那样点击它。

为什么会这样呢？我想因为我通过 $（document）.on（"click"...） 添加它会自动添加到 DOM 中？（指针甚至会更改图标以指示按钮！

$(document).on("click", "#addFavorite-button", function(){addButton();});

function addButton(){
    var uid = $("#main_container").attr("uid");
    var ticker = $("#main_container").attr("ticker");
    var exchange = $("#main_container").attr("exchange");
    var mydiv = document.getElementById("buttonlist");
    var aTag = document.createElement('a');
    aTag.setAttribute('class',"button widget d-margins stockButton");
    aTag.setAttribute('uid',uid);
    aTag.setAttribute('exchange',exchange);
    aTag.setAttribute('ticker',ticker);
    aTag.setAttribute('data-uib',"app_framework/button");   
    aTag.setAttribute('data-ver',"0");
    aTag.setAttribute('id',ticker+"-"+exchange+"-button");
    aTag.innerHTML = ticker;
    mydiv.appendChild(aTag);
};

编辑：太大而无法添加到小提琴中，但我在这里上传了一个工作版本：

要查看它的工作原理，请输入"FB"，单击go。然后点击设置"将库存添加到收藏夹"和"完成。然后单击"收藏夹"按钮。您将看到FB选项。但是，如果您单击任何其他股票，例如MSFT，则无法单击并再次返回FB。中间的文本不会变回来。

index_user_scripts.js文件中替换以下脚本行：

取代 

$(".stockButton").click(function(evt){
     uib_sb.toggle_sidebar($("#leftPanel")); 
     setView($(this).attr("uid"),$(this).attr("ticker"), $(this).attr("exchange"));
});

（更新）跟

$('#buttonlist').on('click','.stockButton',function(evt){
   uib_sb.toggle_sidebar($("#leftPanel")); 
   setView($(this).attr("uid"),$(this).attr("ticker"), $(this).attr("exchange"));
});

解释

前一个脚本将事件委托给当前在 DOM 中具有选择器".stockButton"的所有元素。 它不适用于动态添加的元素。

稍后脚本支持将事件委派给动态添加的子元素。 并不总是建议通过"文档"委派事件。

最好通过子元素的最近父元素委托事件。

正如你所看到的，杰克在回答中提到的脚本

$('#buttonlist').on('click', '.stockButton', function(event) {
    // your click handler here
});

在上面的脚本中，#buttonlist 是所有子按钮（收藏夹按钮）中最接近的父级

这是对 .on（） 的引用，以防您可能想查看。

你已经在使用 jQuery，所以你不妨让它为你工作：

$('<a>', {
    "class": "button widget d-margins stockButton",
    "id": ticket + "-" + exchange + "-button",
    "href": "#", // you will need this in some browsers
    "uid": uid, // invalid attribute
    "exchange": exchange, // invalid attribute
    "ticket": ticket // invalid attribute
})
    .data({
        "uib": "app_framework/button",
        "ver": 0
    });
    .appendTo('#buttonlist');

要完成这项工作，您还需要在#buttonlist上设置一个委派的单击处理程序，这是可能不会被删除的最接近的 DOM 元素：

$('#buttonlist').on('click', '.stockButton', function(event) {
    // your click handler here
});

并删除您现有的$('stockButton').click(...).

我还添加了 href 属性;有些浏览器不喜欢没有它的锚点。

请注意，uid、exchange 和 ticket 不是元素的有效属性，所以我建议也对它们使用 .data()。

相关文章：