Question

http://jsfiddle.net/Ht8eP/3/

In the previous example I catch every clicked list item explicitly by it’s ID, which isn’t practical & efficient specially with too many items. What I want to achieve is to get it dynamically without hard coding all list items.

$(function() {
    $("#a1").click(function()
    {
        document.getElementById("dropdown").innerHTML = "A-1";
        document.getElementById("result").innerHTML = process("a1");
    });

    $("#a2").click(function()
    {
        document.getElementById("dropdown").innerHTML = "A-2";
        document.getElementById("result").innerHTML = process("a2");
    });

    $("#a3").click(function()
    {
        document.getElementById("dropdown").innerHTML = "A-3";
        document.getElementById("result").innerHTML = process("a3");
    });
});

function process(param)
{
    // Some processing!
    return param;
}

Answer 1

To use your existing code, changing it as little as possible you can bind to the ul.dropdown-menu li instead and get the HTML from the a inside it and use the current (this) li‘s id value, similar to this:

$("ul.dropdown-menu li").click(function() {
    var $link = $(this);
    document.getElementById("dropdown").innerHTML = $("a", $link).html();
    document.getElementById("result").innerHTML = process(this.id);
});

---

DEMO – Replacing multiple with single click event

---