Jquery and click event

Question

I have the following code, the elements are added to the page, but unusually the click event never fires. Any ideas?

function ToggleData(e) {
    var parentRow = $(this).parent().parent();
    var rowData = $(':nth-child(2)', parentRow);
    var html = $("<input type='text' id='amendedval' value='" + $.trim(rowData.text()) + "'/>");
    //Add the update tick
    var imgTick = $("<img src='../images/tick.png' id='imgTick'/>");
    rowData.text('');
    rowData.append(html);
    rowData.append(imgTick);
    imgTick.click(updateTickClick);
};

function updateTickClick(e) {
    alert('hi');
};

Could you use FireBug to check if rowData and parentRow are actually containing any DOM objects? (maybe the selectors return 0 elements) — Robert Massa
– Robert Massa, Commented Jul 2, 2009 at 13:29
The img is being added to the page correct with the correctdata. — RubbleFord
– RubbleFord, Commented Jul 2, 2009 at 13:33
Interesting if I add the image to parentRow, and not rowData the click event fire's and i'm not sure as to why. — RubbleFord
– RubbleFord, Commented Jul 2, 2009 at 14:04

robertc · Accepted Answer · 2009-07-03 14:17:19Z

Can you try

$("imgTick").onclick = updateTickClick;

I'm thinking the adding of an event handler may require an actual DOM reference rather than something built out of innerHTML.

--Edit

Looks like the problem is in your selecting of parentRow and rowData - here's my simplified example which works for me in both FF3.5 and IE7. The only change is how rowData is selected:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Testing onclick</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
    function ToggleData(e){
        var rowData = $('td');
        var html = $("<input type='text' id='amendedval' value='" + $.trim(rowData.text()) +"'/>");
        //Add the update tick
        var imgTick = $("<img src='tick.png' id='imgTick'/>");
        rowData.text('');
        rowData.append(html);
        rowData.append(imgTick);
        imgTick.click(updateTickClick);
    };
    function updateTickClick(e) {
        alert('hi');
    };
    </script>
</head>
<body>
    <table>
        <tr>
            <td><a href="#" onclick="ToggleData(this); return false;">Click me</a></td>
        </tr>
    </table>
</body>
</html>

He's using jQuery's click event binder(instead of the onclick DOM one). imgTick should be part of the DOM anyway, since it's appended to rowdata.
How about without the quotes around imgTick? I suggest you check out Firebug (getfirebug.com), its debugger is really useful for eliminating bugs like this.
OK, so 'imgTick = $("<img src='../images/tick.png' id='imgTick'/>");' is equivalent to 'document.createElement("IMG")'? jQuery parses the string and then creates and returns a DOM element rather than inserting it into the document with innerHTML?

Community · Accepted Answer · 2017-05-23 10:34:04Z

1

Your imgTick is being added dynamically to the page. Instead of using .click(), try using .live:

   imgTick.live("click", updateTickClick);

And, no, contrary to what dhaval said, it does NOT have to be anonymous.

edited May 23, 2017 at 10:34

CommunityBot

11 silver badge

answered Jul 2, 2009 at 13:25

Tony Miller

9,1572 gold badges29 silver badges46 bronze badges

2 Comments

RubbleFord Over a year ago

that's what I thought but thought I would check.

Daniel Moura Over a year ago

He is binding the click after the element is added to the page.

rahul · Accepted Answer · 2009-07-02 13:22:21Z

0

imgTick.bind("click", function(){
alert ( "Clicked" );
});

answered Jul 2, 2009 at 13:22

rahul

187k50 gold badges239 silver badges266 bronze badges

Comments

theraneman · Accepted Answer · 2009-07-02 13:24:40Z

0

Did you try debugging in VS to see whats going on here. The information provided here seems incomplete to deduce anything. For a div with id imgTick, I would do this in jQuery for a click event :

$('#imgTick').click(function({

alert('Hi');

});

answered Jul 2, 2009 at 13:24

theraneman

1,6304 gold badges20 silver badges32 bronze badges

1 Comment

theraneman Over a year ago

I think the selector used for getting the imgTick variable is incorrect? Shouldn't it be just $('#imgTick').

RubbleFord · Accepted Answer · 2009-07-02 14:12:49Z

0

Changed var rowData = $(':nth-child(2)',parentRow); To var rowData = $('td:nth-child(2)',parentRow);

Now the click event is occuring correctly.

answered Jul 2, 2009 at 14:12

RubbleFord

7,6669 gold badges55 silver badges80 bronze badges

Comments

dhaval · Accepted Answer · 2009-07-02 20:32:34Z

0

it can be a callback registered with or without anonymous function

edited Jul 2, 2009 at 20:32

answered Jul 2, 2009 at 13:22

dhaval

2,3889 gold badges35 silver badges60 bronze badges

3 Comments

Robert Massa Over a year ago

Why does it need to be? I thinks it's perfectly valid to pass a function reference.

nikc.org Over a year ago

An anonymous function is not required, function reference is perfectly legal.

dhaval Over a year ago

Without live as Tony has pointed out , a function callback is required to register for events whose firing is unknown at start. needs be is changed to can be

Collectives™ on Stack Overflow

Jquery and click event

6 Answers 6

4 Comments

2 Comments

Comments

1 Comment

Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

2 Comments

Comments

1 Comment

Comments

3 Comments

Related