Question

我有一个动态生成的链接列表，其中的元素如下所示：

<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（）目前没有做任何事情。

我试图制作一个jquery（或js函数），这样当我点击一个元素时，它上面会出现一个按钮，而之前点击过的元素的按钮就会消失。

我让this jsfiddle更好地解释。我该怎么办？

Answer 1

选中此项，如果您想在<a>标记的右侧显示按钮，如果您点击其他<a>标记，则应隐藏所有其他按钮

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

Answer 2

由于你已经告知元素是动态添加的，你必须使用.on()，我建议给这些锚标记一个类名。

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

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

});

Answer 3

js

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

fiddle

Answer 4

您应该尝试避免在HTML中设置事件处理程序。您可以为<a>元素设置事件委托，这样即使您添加了更多元素，我也会处理该事件，而无需附加新的事件处理程序。

<强> 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>

jQuery附加按钮链接

4 个答案: