CODEWITHSUNDEEP
javascripthtmlbackbone.jshyperlinkclick
D'Arcy Rail-Ip
D'Arcy Rail-Ip

Reputation: 11955

Catching a click event on an <a> hyperlink with Backbone's Events function

I have recently switched from using two buttons to using a dropdown list of links in my backbone model.

Previously, this code captured these button clicks:

events: {
        "click #expense-delete-button": "deleteRow",
        "click #expense-copy-button": "copyRow",
    },

This worked fine, but now that I've changed my html to this: 

<div class ="expense-action-icons btn-group">
    <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
        <i class="icon-cog"></i>
    </button>
    <ul class="dropdown-menu pull-right">
        <li>
            <a href="#" id="expense-copy-button">
                <img src="../Images/copy.png"/>
                Copy Entry
            </a>
        </li>
        <li>
            <a href="#" id="expense-delete-button">
                <i class="icon-trash"></i>
                Delete Entry
            </a>
        </li>
    </ul>
</div>

The clicks are not being captured. I tried onclick as well and this didn't work.

Upvotes: 2

Views: 5077

Answers (1)

jayM
jayM

Reputation: 602

You have to create the function inside your view.

    events: {
        "click #expense-delete-button": "deleteRow",
        "click #expense-copy-button": "copyRow",
    },

    deleteRow:function(e){
        e.preventDefault();
        //Element clicked on
        var target =  $(e.currentTarget);
        console.log('whatever you want');
    },

    copyRow:function(e){
        //Element clicked on
        var target =  $(e.currentTarget);

        console.log('copy your row');
    },

    initialize:function(){
        //view code....
    }

Upvotes: 3

Related Questions