Question

How can I change the click binding of an element?
Html snippet is:

<div id="Selected">
<ul>
    <li>element 01<a class="element01-selected">-</a></li>
    <li>element 02<a class="element02-selected">-</a></li>
    <li>element 03<a class="element03-selected">-</a></li>
</ul>
</div>
<div id="UnSelected">
<ul>
    <li>element 01<a class="element01-unselected">+</a></li>
    <li>element 02<a class="element02-unselected">+</a></li>
    <li>element 03<a class="element03-unselected">+</a></li>
    <li>element 04<a class="element04-unselected">+</a></li>
    <li>element 05<a class="element05-unselected">+</a></li>
</ul>
</div>

At the moment, I initialize the bindings like this:

<script type="text/javascript" language="javascript">
$("#Selected ul li a").click(
    function()
    {
        // do stuffs
        return false;
    }
);
$("#UnSelected ul li a").click(
    function ()
    {
    var li = $(this).parent();
    $clone = li.clone(false);
    $clone.children().text("-");
    $("#Selected ul").append($clone);
    return false;
    }
);
</script>

The element is copied to the 1st list but the click bind remains, I want the item clicked to switch to the other binding:

• + link adds a copy (where + is changed to -) into the 1st list
• – link of added copy removes the item from the 1st list

Thanks

Answer 1

Using delegate to attach the events. This way if you add any new element to this it will trigger the fire the same events.

$("#Selected").delegate("ul li a", "click", function()
    {
        // do stuffs
        return false;
    }
);
$("#UnSelected").delegate("ul li a", "click", function ()
    {
    var li = $(this).parent();
    $clone = li.clone(false);
    $clone.children().text("-");
    $("#Selected ul").append($clone);
    return false;
    }
);