CODEWITHSUNDEEP
javascriptjquery
user1357015
user1357015

Reputation: 11676

Make a new anchor live in DOM

I am trying to add a new anchor via the code below. The addButton function works perfectly and adds the appropriate element in the appropriate spot.

However, that element is not "active". Specifically, I can't click it like I can the others.

Why is this the case? I thought because I added through a $(document).on("click"...) it gets added automatically to the DOM? (The pointer even changes icon's to indicate a button!)

$(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);
};

Edit: Too large to add to a fiddle but I uploaded a working version here:

To see it work, type in "FB", click go. Then hit settings "add stock to favorites" and "done. Then click the "favorites" button. You will see the FB option. However, if you click any other stock, like MSFT, you can't click and get back to FB again. The text in the middle doesn't change back.

Upvotes: 0

Views: 102

Answers (2)

Sunny Sharma
Sunny Sharma

Reputation: 4934

in index_user_scripts.js file replace the following script lines :

Replace

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

(Update) With 

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

Explanation

The former script delegates an event to all the elements having selector '.stockButton' which are currently in DOM. it doesn't work for dynamically added elements.

The Later script supports delegating events to dynamically added child elements. it is NOT always recommended to delegate events through 'document'.

Preferably you should delegate the event through the closest parent of the child element.

As you can see the script mentioned in answer by Jack

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

in the script above #buttonlist is the closest parent of all the child button (favorite buttons)

Here's the reference to .on() in case you may want to look at.

Upvotes: 1

Ja͢ck
Ja͢ck

Reputation: 173532

You're already using jQuery, so you might as well make it work for you:

$('<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');

To make this work you additionally need to set up a delegated click handler on #buttonlist which is the closest DOM element that will likely not be removed:

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

And remove your existing $('stockButton').click(...).

I've also added the href attribute; some browsers don't like anchors without it.

Please note that uid, exchange and ticket aren't valid attributes for an element, so I would suggest to use .data() for them as well.

Upvotes: 1

Related Questions