Question

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

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

为什么会这样？我想是因为我通过$（文件）.on（“点击”...）添加它会自动添加到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);
};

修改太大了，无法添加到小提琴，但我上传了一个工作版本here:

要查看它是否有效，请输入“FB”，然后单击“执行”。然后点击设置“添加库存到收藏夹”和“完成。然后点击”收藏夹“按钮。你会看到FB选项。但是，如果你点击任何其他股票，如MSFT，你不能点击并返回到FB中间的文字不会改变。

Answer 1

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")); });

<强>解释

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

Later脚本支持将事件委托给动态添加的子元素。 并不总是建议 通过＆＃39; 文档＆＃39;来委托事件。

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

正如您可以看到Jack
回答中提到的脚本
$('#buttonlist').on('click', '.stockButton', function(event) { // your click handler here });
上面脚本中的
#buttonlist 是所有子按钮（最喜欢的按钮）中最近的父母

如果您想查看，请参考 .on() 。

Answer 2

你已经在使用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上设置delegated click handler，这是可能无法删除的最接近的DOM元素：

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

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

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

请注意，uid，exchange和ticket不是元素的有效属性，因此我建议也使用.data()。

在DOM中创建一个新锚

2 个答案: