CODEWITHSUNDEEP
javascriptjqueryhtml
Alexandru Severin
Alexandru Severin

Reputation: 6228

jQuery attach button to link

I have a list of links generated dynamically, where the elements look like this:

<li id="nod1"> 
    <span>
        <a onclick="javascript:getNodeProperties('1');">Element 1</a>
    </span>
</li>
<li id="nod2"> 
    <span>
        <a onclick="javascript:getNodeProperties('2');">Element 2</a>
    </span>
</li>

getNodeProperties() doesn't do anything currently.

I'm trying to make a jquery (or js function), so that when I click an element, a button will appear on it's right side and the button from the previously clicked element will disappear.

I made this jsfiddle to better explain. How can I do it?

Upvotes: 0

Views: 77

Answers (4)

niko
niko

Reputation: 9393

Since you have told elements are dynamically added you have to use .on(), I would recommend to give a class name to those anchor tags.

$(document).on("click","a",function(){

    $("input.active").remove();
    $(this).html($(this).html() + "<input class='active' type='button' value='Click me'/>"); 

});

Upvotes: 1

user3662273
user3662273

Reputation: 554

Check this, if you want to display button in right side of <a> tag,and if you click on other <a> tag, the all other button should be hidden

window.getNodeProperties = function(nod_id){
    $("li").find(".buttonClass").remove();
    $("<input type='button'class='buttonClass'>").appendTo("#nod"+nod_id);
}

Upvotes: 2

Mathias
Mathias

Reputation: 5672

You should try and avoid setting the event handlers in your HTML. You can setup an event delegate for the <a> elements so that i will handle the event even if you add more elements, without attaching new event handlers.

DEMO

$(".tree.well").on("click", "li span", function() {
    var but = $("<button>");
    but.text("New button");
    $(this).parent().append(but);
    $(this).remove();
});

HTML

<div class="tree well">
    <ul>
        <li id="nod1"> 
            <span>
                <a>Element 1</a>
            </span>
        </li>
        <li id="nod2"> 
            <span>
                <a>Element 2</a>
            </span>
        </li>
        <li id="nod3"> 
            <span>
                <a>Element 3</a>
            </span>
        </li>
    </ul>
</div>

Upvotes: 0

Alex Char
Alex Char

Reputation: 33218

js 

   window.getNodeProperties = function(nod_id){
    $("#nod"+nod_id).find("span").remove();
    $("<input type='button'>").appendTo("#nod"+nod_id);
}

fiddle

Upvotes: 0

Related Questions