JQuery Function on link click

Question

I am attempting to call up a jquery function on link click with no success:

here is my html:

<a href="..." id="removeItem" checkID="12" >Delete</a>
<a href="..." id="removeItem" checkID="13" >Delete</a>
<a href="..." id="removeItem" checkID="14" >Delete</a>

    $("#removeItem").click(function(checkID) {
    return false;
    var checkID = $(this).attr("checkID");
    $("#removeDialog").dialog( {
        buttons: {
            "No" : function () {
                $(this).dialog("destroy");
                $('input#CheckName').focus();
            },
            "Yes": function () {
                $.ajax({
                    url: "itemRemoveWS.html?id=checkID",
                    data: {
                        "action" : "remove",
                        "id" : checkID
                    },
                    success: function (data) {
                        $("#removeDialog").dialog("destroy");
                        var ang = '';
                        var obj = $.parseJSON(data);
                        $.each(obj, function() {
                           ang += '<table class="form"><tr><td width="45">' + this["CheckID"] + '</td><td width="140">' + this["Name"] + '</td><td width="95">' + this["CheckNumber"] + '</td><td align="right" width="70">$' + this["Amount"] + '</td><td width="220" style="padding-left: 15px;">' + this["Description"] +'</td><td><a href="#">Delete</a></td></tr></table>';
                        });
                        $('#container').html(ang);
                        $("input#Amount").val('');
                        $("input#CheckName").val('');
                        $("input#Check_Number").val('');
                        $("select#Company").val('MMS');
                        $("th#dept").hide();
                        $('input#CheckName').focus();
                    }
                });
            }
        }
    });
});

What exactly is the problem?

MadSkunk
– MadSkunk

2012-12-05 20:37:54 +00:00
Commented Dec 5, 2012 at 20:37 — MadSkunk
– MadSkunk, Commented Dec 5, 2012 at 20:37

A. Wolff · Accepted Answer · 2012-12-05 20:38:18Z

10

You have return false; as first instruction in your click event callback function. This means you are doing nothing.

Put it at the very last line of your logic or better change it to e.preventDefault(); using

$("#removeItem").click(function(e) {...}

As a side note, $("#removeItem").click(function(checkID) {} checkID will be an ref to triggered event here, not an element id attribute.

And again, ID attribute MUST be unique for each element on each html page.

answered Dec 5, 2012 at 20:38

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ORION · Accepted Answer · 2012-12-05 20:42:30Z

2

To call of function on a link click use javascript:void(0) as your href, then add your function call to the onclick event of your link:

<a runat="server" id="myButton" href="javascript:void(0);" onclick="myFunction();" ></a>

answered Dec 5, 2012 at 20:42

ORION

2,4313 gold badges24 silver badges34 bronze badges

Comments

wanovak · Accepted Answer · 2012-12-05 20:40:14Z

0

Instead of using return false, do this:

checkID.preventDefault();

Also, you're not allowed to have two elements with the same ID.

answered Dec 5, 2012 at 20:40

wanovak

6,12727 silver badges32 bronze badges

Comments

Jason · Accepted Answer · 2012-12-05 20:40:27Z

0

As roasted said, return false is likely your issue. It may be that you meant this:

checkID.preventDefault();

answered Dec 5, 2012 at 20:40

Jason

1,2208 silver badges8 bronze badges

Collectives™ on Stack Overflow

JQuery Function on link click

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related